Here is what you should know in JavaScript before starting to learn the React JS Framework.
React is to date one of the most popular javascript frameworks / libraries on the market and its hi in demand.
Naturali everyone wants to jump directly from html and css to a framework. And also it is absolutely posible to do so,I would not recommended it at all.
Not only should you know the basics of javascript but also a couple of more advance but extremely useful stuff before moving directly to react.
Download PDF
So he are in my opinion 10 things need You to know in javascript before moving on to react.
What are javascript template literals , template strings
Template literals aka template strings are literals delimited with backticks (`), allowing embedded expressions called substitutions.
Untagged template literals result in strings, which makes them useful for string interpolation (and multiline strings, since unescaped newlines are allowed).
Tagged template literals call a function (the tag function) with an array of any text segments from the literal followed by arguments with the values of any substitutions, which is useful for DSLs.
Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between the backticks () get passed to a function.
JavaScript Shorthand property names
Objects can be initialized using new Object(), Object.create(), or using the literal notation (initializer notation).
An object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).
JavaScript Arrow functions
Arrow functions are another way to write functions in JavaScript, but they do have a few semantic differences.
An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.
Differences & Limitations:
Does not have its own bindings to this or super, and should not be used as methods.
Does not have new.target keyword.
Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
Can not be used as constructors.
What is JavaScript Destructuring
Destructuring will probably become your favorite JavaScript feature.
I destructure objects and arrays all the time (and if you’re using useState you probably are too, like so).
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
JavaScript Parameter defaults
Another feature that you will use all the time is Parameter defaults.
It’s a really powerful way to declaratively express default values for your functions.
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.
JavaScript Rest/Spread
The … syntax can be thought of as kind of a “collection” syntax where it operates on a collection of values.
I strongly recommend you to learn how and where it can be used as well. It actually takes different meanings in different contexts, so learning the nuances there will help you emancely.
Spread syntax (…) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.
JavaScript ESModules
When you’re building large app with modern tools, chances are you will need to use modules.
It’s essential to learn how the syntax works because any application of sligltly larger size will likely need to make use of modules for code reuse and organization.
The static import statement is used to import read only live bindings which are exported by another module.
Imported modules are in strict mode whether you declare them as such or not. The import statement cannot be used in embedded scripts unless such script has a type=”module”. Bindings imported are called live bindings because they are updated by the module that exported the binding.
There is also a function-like dynamic import(), which does not require scripts of type=”module”.
Backward compatibility can be ensured using attribute nomodule on the
The export statement is used when creating JavaScript modules to export live bindings to functions, objects, or primitive values from the module so they can be used by other programs with the import statement. The value of an imported binding is subject to change in the module that exports it. When a module updates the value of a binding that it exports, the update will be visible in its imported value.
Exported modules are in strict mode whether you declare them as such or not. The export statement cannot be used in embedded scripts.
JavaScript Ternaries
A alternative to if else statements are ternaries. They’re beautifully declarative. Especially in JSX.
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.
JavaScript Array Methods
The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
A alternative to if else statements are ternaries. They’re beautifully declarative. Especially in JSX.
JavaScript Promises and async/await
Promises and async await are a big subject and they can take a bit of practice and time working with them to get good at them.
Promises are everywhere in the JavaScript ecosystem and thanks to how entrenched React is in that ecosystem.
Promises help you manage asynchronous code and are returned from many DOM APIs as well as third party libraries. Async/await syntax is a special syntax for dealing with promises. The two go hand-in-hand.
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
An async function is a function declared with the async keyword, and the await keyword is permitted within it.
The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.
The await operator is used to wait for a Promise. It can only be used inside an async function within regular JavaScript code; however it can be used on its own with JavaScript modules.