Modules
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.
React ES6 Spread Operator
Spread Operator
The JavaScript spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object.
Example
const numbersOne = [1, 2, 3]; const numbersTwo = [4, 5, 6]; const numbersCombined = [...numbersOne, ...numbersTwo];
React ES6 Destructuring
Destructuring
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.
React ES6 Array Methods
Array Methods
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
React ES6 Variables
Variables
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
React ES6 Arrow Functions
Arrow Functions
Arrow functions allow us to write shorter function syntax:
Example
Before:
hello = function() {
return "Hello World!";
}
React ES6 Classes
Classes
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.
Example
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.
Upgrade React
Upgrade to React 18
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.
React Getting Started
To use React in production, you need npm which is included with Node.js.
To get an overview of what React is, you can write React code directly in HTML.
But in order to use React in production, you need npm and Node.js installed.
React Directly in HTML
The quickest way start learning React is to write React directly in your HTML files.
W3Schools Spaces
The easiest way to get started with creating HTML files is W3Schools Spaces!
It is the perfect place to create, edit, and share your work with others!
React Tutorial
React Tutorial
Learn React
React is a JavaScript library for building user interfaces.
React is used to build single-page applications.
React allows us to create reusable UI components.