React’s goal is in many ways to render HTML in a web page.
React renders HTML to the web page by using a function called createRoot() and its method render().
The createRoot() function takes one argument, an HTML element.
The purpose of the function is to define the HTML element where a React component should be displayed. Continue reading React Render HTML
The ternary operator is a simplified conditional operator like if / else.
Syntax: condition ? <expression if true> : <expression if false>
Here is an example using if / else: Continue reading React ES6 Ternary Operator
JavaScript modules allow you to break up your code into separate files.
This makes it easier to maintain the code-base.
ES Modules rely on the import and export statements.
The JavaScript spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object.
const numbersOne = [1, 2, 3]; const numbersTwo = [4, 5, 6]; const numbersCombined = [...numbersOne, ...numbersTwo];
To illustrate destructuring, we’ll make a sandwich. Do you take everything out of the refrigerator to make your sandwich? No, you only take out the items you would like to use on your sandwich.
Destructuring is exactly the same. We may have an array or object that we are working with, but we only need some of the items contained in these.
Destructuring makes it easy to extract only what is needed.
There are many JavaScript array methods.
One of the most useful in React is the .map() array method.
The .map() method allows you to run a function on each item in the array, returning a new array as the result.
In React, map() can be used to generate lists. Continue reading React ES6 Array Methods
Before ES6 there was only one way of defining your variables: with the
var
Now, with ES6, there are three ways of defining your variables: var, let, and const. Continue reading React ES6 Variables
Arrow functions allow us to write shorter function syntax:
Before:
hello = function() {
return "Hello World!";
}
ES6 introduced classes.
A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.
A simple class constructor:
class Car {
constructor(name) {
this.brand = name;
}
}
Notice the case of the class name. We have begun the name, “Car”, with an uppercase character. This is a standard naming convention for classes.
Upgrading an existing React application to version 18 only requires two steps.
If you are already using the latest version of create-react-app which uses React version 18 you can skip this section.