Some people believe that you need to be a JavaScript master before starting learning React, and that couldn’t be further from the truth. You should know some fundamentals, and I want to tell you exactly which ones.
let and const.
This is the ES6 way of assigning variables, it replaces “var”.
“let” is for variables that are gonna be reassigned in the future.
“const” is for variables that are not gonna change, you define them and you use them, but they have a “constant” value.
imports and exports.
A big part of React is reusability. You create a component (like a button), export it, and then import it on your other components without having to write it out again.
Functions.
Arrow functions would be better, but if you know how to write normal functions, this also works.
Let’s see our Button component with normal functions vs arrow functions, they are really similar!
Arrow functions have an implicit return, so they can also be shortened.
Template literals.
his is an easy way to concatenate strings.
You use the backtick ` for them.
Instead of having to do: “Hello, my name is ” + name + “, nice to meet you!
” You do:
`Hello, my name is ${name}, nice to meet you!` A lot easier, isn’t it?
map and filter.
These are the two most important methods in React.
map() returns a new array with the results of the passed function.
This is essential to render data of an array.
filter() returns a new array with all the elements that returned true from the passed function.
Array destructuring.
This unpacks values from arrays into different variables.
This is important to know because it’s used in useState, one of the first things you will learn in React.
Object destructuring
Similar to array destructuring, this lets us extract properties into a variable named with the property name.
It’s especially useful for functions.
Conditional rendering.
What if we don’t want to show anything if the condition is false?
We can do
condition ?’something’ : null
Or we can also do
condition && ‘something’
This will produce the same result but its much cleaner.