React Js W3 School
Uploaded by
chabdulmanan8953React Js W3 School
Uploaded by
chabdulmanan8953 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.
Learning by Examples
Our "Show React" tool makes it easy to demonstrate React. It shows both the code and the result.
Example:
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hello(props) {
return <h1>Hello World!</h1>;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);
Learning by Exercises
React Exercises
Exercise:
Enter the correct ReactDOM method to render the React element to the DOM.
ReactDOM. (myElement, document.getElementById('root'));
Create React App
To learn and test React, you should set up a React Environment on your computer.
This tutorial uses the create-react-app.
The create-react-app tool is an officially supported way to create React applications.
Node.js is required to use create-react-app.
Open your terminal in the directory you would like to create your application.
Run this command to create a React application named my-react-app:
npx create-react-app my-react-app
create-react-app will set up everything you need to run a React application.
Note: If you've previously installed create-react-app globally, it is recommended that you uninstall
the package to ensure npx always uses the latest version of create-react-app. To uninstall, run this
command: npm uninstall -g create-react-app.
Run the React Application
Run this command to move to the my-react-app directory:
cd my-react-app
Run this command to execute the React application my-react-app:
npm start
A new browser window will pop up with your newly created React App! If not, open your browser
and type localhost:3000 in the address bar.
The result:
You will learn more about the create-react-app in the React Get Started chapter.
What You Should Already Know
Before starting with React.JS, you should have intermediate experience in:
HTML
CSS
JavaScript
You should also have some experience with the new JavaScript features introduced in ECMAScript
6 (ES6), you will learn about them in the React ES6 chapter.
CHAPTER # 1: React Introduction
What is React?
React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by
Facebook.
React is a tool for building UI components.
How does React Work?
React creates a VIRTUAL DOM in memory.
Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory,
where it does all the necessary manipulating, before making the changes in the browser DOM.
React only changes what needs to be changed!
React finds out what changes have been made, and changes only what needs to be changed.
You will learn the various aspects of how React does this in the rest of this tutorial.
React.JS History
Current version of React.JS is V18.0.0 (April 2022).
Initial Release to the Public (V0.3.0) was in July 2013.
React.JS was first used in 2011 for Facebook's Newsfeed feature.
Facebook Software Engineer, Jordan Walke, created it.
Current version of create-react-app is v5.0.1 (April 2022).
create-react-app includes built tools such as webpack, Babel, and ESLint.
For use of React:
Install VS Code and then install node.js (version latest)
NPM VS NPX?
CHAPTER # 2: 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.place to create,
edit, and share your work with others!
Get started for free ❯
Start by including three scripts, the first two let us write React code in our JavaScripts, and the
third, Babel, allows us to write JSX syntax and ES6 in older browsers.
You will learn more about JSX in the React JSX chapter.
Example
Include three CDN's in your HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>
Try it Yourself »
This way of using React can be OK for testing purposes, but for production you will need to set up
a React environment.
Setting up a React Environment
If you have npx and Node.js installed, you can create a React application by using create-react-app.
If you've previously installed create-react-app globally, it is recommended that you uninstall the
package to ensure npx always uses the latest version of create-react-app.
To uninstall, run this command: npm uninstall -g create-react-app.
Run this command to create a React application named my-react-app:
npx create-react-app my-react-app
The create-react-app will set up everything you need to run a React application.
Run the React Application
Now you are ready to run your first real React application!
Run this command to move to the my-react-app directory:
cd my-react-app
Run this command to run the React application my-react-app:
npm start
A new browser window will pop up with your newly created React App! If not, open your browser
and type localhost: 3000 in the address bar.
The result:
Modify the React Application
So far so good, but how do I change the content?
Look in the my-react-app directory, and you will find a src folder. Inside the src folder there is a file
called App.js, open it and it will look like this:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
export default App;
Try changing the HTML content and save the file.
Notice that the changes are visible immediately after you save the file, you do not have to reload
the browser!
Example
Replace all the content inside the <div className="App"> with a <h1> element.
See the changes in the browser when you click Save.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
export default App;
Notice that we have removed the imports we do not need (logo.svg and App.css).
The result:
What's Next?
Now you have a React Environment on your computer, and you are ready to learn more about
React.
In the rest of this tutorial we will use our "Show React" tool to explain the various aspects of React,
and how they are displayed in the browser.
If you want to follow the same steps on your computer, start by stripping down the src folder to
only contain one file: index.js. You should also remove any unnecessary lines of code inside
the index.js file to make them look like the example in the "Show React" tool below:
Example
Click the "Run Example" button to see the result.
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myFirstElement = <h1>Hello React!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);
Run Example »
Exercise:
Enter the correct ReactDOM method to render the React element to the DOM.
ReactDOM. (myElement, document.getElementById('root'));
Submit Answer »
Start the Exercise
React.js is an open source JavaScript library for creating user interfaces. It
was created by Facebook back in 2013.
Demand for React developers is skyrocketing, which means that
having knowledge of this library is definitely going to be worth it!
Some of the popular websites built using ReactJS include Dropbox,
Netflix, and Instacart – and the list goes on.
Now, the common question that comes to everyone's mind is do we
really need a JavaScript library, just for creating user interfaces? We
can do the same using just HTML and CSS, right?
So what makes React so popular rather than just using vanilla HTML,
CSS, and JavaScript? For that, let's first look at the 2 main features
of React:
1. Declarative Views
2. Component Based Approach
Of course there is more to React than this, but we'll focus on these
two features here. Before moving on and learning more about these
features, we must clearly understand the browser DOM.
What is the DOM?
The DOM (Document Object Model) represents the web page as a
tree structure. Any piece of HTML that we write is added as a node,
to this tree.
With JavaScript, we can access any of these nodes (HTML elements)
and update their styles, attributes, and so on. This means that the
DOM enables JavaScript to access and modify the web page easily.
Now, any tree must have a root node, right? Here, the root node
is document. Are you wondering where this document node came
from? Well, it's part of the browser. Any HTML tag you write is
going to be a direct or indirect child of the root node document.
DOM tree with root node as document
The below image shows the equivalent conceptual tree structure of
the DOM:
Browser DOM tree
Now hopefully you have a clear understanding of the browser DOM.
So let's dive into the two main features of ReactJS that we're gonna
discuss today, namely its component-based approach and declarative
views.
Component-Based Approach
Everything in React is a component. A web page is a collection of
components.
Think of a component like a regular function in any programming
language. What are the main advantages of functions? Reusability,
abstraction, and avoiding redundant code, right?
Same with components in React. Don't get confused with the code in
the below images, as we are using a mix of HTML and JavaScript.
Hang in there, we will come to that in a second.
Code for component named Card
The above image represents a component called Card (since the
function name is Card). As mentioned earlier, functions or
components can be reused any number of times. That is exactly what
we are doing in the below image. We are reusing
the Card component (<Card />) four times. Keep in mind that,
writing <Card /> is equivalent to <Card></Card>. (Stick to the former
notation, since it's more common).
Card Component reused multiple times
Congrats if you thought of this! The four <Card /> components are
written inside another component called Home (since the function
name is Home, <Home />). Congrats again if you thought of this!
Of course you can reuse the <Home /> component, which in turn is a
collection of many <Card /> components. That is, we can nest any
number of components inside other components.
Now comes a big question: if components are going to be nested like
we mentioned, what is the topmost component? It's the <App
/> component (provided by React). Any custom component that you
write is going to be a direct or indirect child of the App component
in React.
On a high level, the whole component structure looks like a tree with
the root node as App.
Also keep in mind that component names have their first letter
capitalized. This convention is used to distinguish between a React
component and a regular HTML tag.
What happens if you don't capitalize the first letter of a component
name? There will be an ambiguity, whether it is an HTML tag or a
React component.
In the below image, the Navbar, Carousal, Services and so on are
all components. Components altogether form the home page or
Home component of a website. Neat, isn't it?
Home page consisting of Navbar, Carousal, Services etc components
Components are laid out in the order in which they should appear in
the page. Here, the Navbar comes first, at the top, then the Carousal
comes below the Navbar, so on and so forth.
If you carefully observe the above images, we are using a mix of both
JavaScript and HTML. This is known as JSX (Javscript XML).
This is just a nice way to write React.
Weird isn't it ? This
is JSX
In the above image, we are assigning HTML to a variable
named element, just like we assign values to variables in JavaScript.
Of course, you can now reuse this variable (element) anywhere in
your code like this:
Output of the above code
And that's it about components in React. Now let's move onto the
next feature.
Declarative Views in React
In React, we don't actually interact with the browser DOM. Yes, you
heard it right! We interact with the virtual DOM, which is an exact
copy of the browser DOM, but in memory.
Yeah! We are dealing with a new DOM, other than the browser
DOM. This means that any React component that we write is inserted
as a child to the virtual DOM.
You must be wondering, what why do we need this virtual DOM
when we already have the browser DOM? The virtual DOM is the
reason React renders so quickly and efficiently.
When we update the browser DOM (when not using React), it takes
a significant amount of time to lay out the elements and repaint the
screen for the user to see changes. This involves a huge section of the
DOM tree being repainted.
But, when using React, updates happen in the virtual DOM first.
Then, the browser DOM and virtual DOM are diffed or compared to
see if there are any updates made to virtual DOM that must be
reflected or updated in the browser DOM.
If there are any, only then are updates made to the browser DOM to
match the virtual DOM. And these updates are only made at places
where updates are to be carried out. This means that the entire
browser DOM is not updated as previously mentioned. This
improves speed and efficiency.
Only part of the DOM is getting updated, instead of whole
Advantages of React
Now that you know the main features of React, let's understand the
advantages of using it.
1. Code Maintainability, because we can now reuse components and
break complex logic into smaller parts.
2. Fast and Performant, because only part of the browser DOM is
updated instead of the whole thing.
3. One way Data Flow, which means that data flow is possible only
from the parent component to child components. That is, components
are nested, with the top most component being App. This keeps
everything modular.
4. Easy to learn and use, development time is less and learning curve
is small.
Suppose you want to build a complex web application. You want it
to be fast and performant, and you don't have a lot of time to develop
it. In this case, React should be on top of your list!
Now you hopefully understand why React is so popular even though
we can build a website with just HTML, CSS, and JavaScript.
Now let's see, how to set up React on your machine and create a brand
new project.
How to Start a New React Project
Step 1 – Install Node
Before even thinking about React, you must have Node installed
properly. This is because by installing Node you also get npm, which
is a package manager for JavaScript. Think of it as an application you
can use to download additional libraries, which you might need in
your project.
Download and install it from
here: https://nodejs.org/en/download/ (Download the LTS
version).
After installation, open your terminal (Mac or Linux) or command
prompt (Windows) and type in npm -v and it should output something
like this:
Step 2 – Create your React app
Now, it's time to install a tool which makes it easy to build a React
project. Congrats! You may have guessed that I'm talking
about create-react-app.
Type in the command npm install create-react-app and wait for few
seconds.
Step 3 – Set up your React web app
Now let's start setting up our very first React web application. Let's
name it myreactapp.
For starting a new React project, type in the following command: npx
create-react-app myreactapp.
The general syntax is npx create-react-app <application_name> (and note that
it's npx not npm, don't get confused :) ).
Continuation of above image
Step 4 – Open your new React app
Now it's time to see our React app in action. For that, move into the
created project (myreactapp as we created it in the previous step) by
using the command cd myreactapp and type in the following: npm start.
Now this command opens up a browser with our newly created React
App:
And that's it! You have successfully setup React on your machine,
and have started a brand new project. And now you are ready to grasp
bigger concepts in React! Happy hacking❤️
What is DOM?
The DOM (Document Object Model) represents the web page as a tree structure. Any piece of HTML
that we write is added as a node, to this tree. With JavaScript, we can access any of these nodes (HTML
elements) and update their styles, attributes, and so on.
DOM stands for “Document Object Model,” which represents your application UI
and whenever the changes are made in the application, this DOM gets updated and
the user is able to visualize the changes. DOM is an interface that allows scripts to
update the content, style, and structure of the document. Virtual DOM is a node tree
similar to Real DOM that lists elements, content, and attributes as objects and
properties. React render () method creates a node tree from the react components. Then
it updates the node tree in response to the mutations in the data model caused by various
actions done in the UI.
Let’s take a simple example of an array
let languages = [cpp, java, python]
Now we want to replace python with javascript. For that, we need to create a new array.
let languages = [cpp, java, javascript]
Instead of this, we can just traverse to languages[2] and update only the element. Instead
of redoing the whole thing, we just changed the element which we needed to update.
The same thing is done by Virtual DOM. Instead of updating all the node elements, it
just updates the changed elements. Virtual DOM does the same thing. Instead of
updating all the node elements, it just updates the changed elements. Virtual DOM does
the same thing. Virtual DOM does the same thing. Instead of updating all the node
elements, it just updates the changed elements.
ReactDOM. Render () will create a Virtual and real DOM tree of the first load. When
events like click, keypress, or API response occur, Virtual DOM tree elements are
notified for state or prop change; if that state or props are updated, then the node
elements are updated. When changes are done in UI, the changes are also done in Virtual
DOM. Instead of updating all the nodes, Virtual DOM updates only those components
in which changes are made.
Once Virtual DOM contains all the updated changes, it is then compared with the Real
DOM and the difference is calculated between them.
Once Virtual DOM contains all the updated changes it is then compared with the Real
DOM and the difference is calculated between them.
Once the difference is calculated the real DOM will update only the new components
that have actually changed. This is called Reconciliation. Virtual DOM is faster
and more effective than Real DOM as it just focuses on the updated components
instead of updating the entire DOM.
CHAPTER # 3: React ES6
What is ES6?
ES6 stands for ECMAScript 6.
ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it
was published in 2015, and is also known as ECMAScript 2015.
Why Should I Learn ES6?
React uses ES6, and you should be familiar with some of the new features like:
Classes
Arrow Functions
Variables (let, const, var)
Array Methods like .map()
Destructuring
Modules
Ternary Operator
Spread Operator
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.
Now you can create objects using the Car class:
Example
Create an object called "mycar" based on the Car class:
class Car {
constructor(name) {
this.brand = name;
const mycar = new Car("Ford");
Try it Yourself »
Note: The constructor function is called automatically when the object is initialized.
Method in Classes
You can add your own methods in a class:
Example
Create a method named "present":
class Car {
constructor(name) {
this.brand = name;
present() {
return 'I have a ' + this.brand;
}
const mycar = new Car("Ford");
mycar.present();
Try it Yourself »
As you can see in the example above, you call the method by referring to the object's method name
followed by parentheses (parameters would go inside the parentheses).
Class Inheritance
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class:
Example
Create a class named "Model" which will inherit the methods from the "Car" class:
class Car {
constructor(name) {
this.brand = name;
present() {
return 'I have a ' + this.brand;
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
const mycar = new Model("Ford", "Mustang");
mycar.show();
Try it Yourself »
The super () method refers to the parent class.
By calling the super () method in the constructor method, we call the parent's constructor method
and gets access to the parent's properties and methods.
To learn more about classes, check out our JavaScript Classes section.
React ES6 Arrow Functions
Arrow Functions
Arrow functions allow us to write shorter function syntax:
Before:
hello = function() {
return "Hello World!";
Try it Yourself »
With Arrow Function:
hello = () => {
return "Hello World!";
Try it Yourself »
It gets shorter! If the function has only one statement, and the statement returns a value, you can
remove the brackets and the return keyword: like below
Arrow Functions Return Value by Default:
hello = () => "Hello World!";
Try it Yourself »
Note: This works only if the function has only one statement.
If you have parameters, you pass them inside the parentheses:
Arrow Function With Parameters:
hello = (val) => "Hello " + val;
Try it Yourself »
In fact, if you have only one parameter, you can skip the parentheses as well:
Arrow Function Without Parentheses:
hello = val => "Hello " + val;
Try it Yourself »
What About this?
The handling of this is also different in arrow functions compared to regular functions.
In short, with arrow functions there is no binding of this.
In regular functions the this keyword represented the object that called the function, which could
be the window, the document, a button or whatever.
With arrow functions, the this keyword always represents the object that defined the arrow
function.
Let us take a look at two examples to understand the difference.
Both examples call a method twice, first when the page loads, and once again when the user clicks
a button.
The first example uses a regular function, and the second example uses an arrow function.
The result shows that the first example returns two different objects (window and button), and the
second example returns the Header object twice.
Example
With a regular function, this represents the object that called the function:
class Header {
constructor() {
this.color = "Red";
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Example
With an arrow function, this represents the Header object no matter who called the function:
class Header {
constructor() {
this.color = "Red";
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Try it Yourself »
Remember these differences when you are working with functions. Sometimes the behavior of
regular functions is what you want, if not, use arrow functions.
Test Yourself With Exercises
Exercise:
Complete this arrow function:
hello = "Hello World!";
React ES6 Variables
❮ PreviousNext ❯
Variables
Before ES6 there was only one way of defining your variables: with the var keyword. If you did
not define them, they would be assigned to the global object. Unless you were in strict mode, then
you would get an error if your variables were undefined.
Now, with ES6, there are three ways of defining your variables: var, let, and const.
var
var x = 5.6;
If you use var outside of a function, it belongs to the global scope.
If you use var inside of a function, it belongs to that function.
If you use var inside of a block, i.e. a for loop, the variable is still available outside of that block.
var has a function scope, not a block scope.
let
let x = 5.6;
let is the block scoped version of var, and is limited to the block (or expression) where it is defined.
If you use let inside of a block, i.e. a for loop, the variable is only available inside of that loop.
let has a block scope.
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
const
const x = 5.6;
const is a variable that once it has been created, its value can never change.
const has a block scope.
The keyword const is a bit misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object
But you CAN:
Change the elements of constant array
Change the properties of constant object
Exercise:
Create a variable that cannot be changed.
x = 5.6;
Submit Answer »
Start the Exercise
React ES6 Array Methods
❮ PreviousNext ❯
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.
Example
Generate a list of items from an array:
const myArray = ['apple', 'banana', 'orange'];
const myList = myArray.map((item) => <p>{item}</p>)
Run Example »
Test Yourself With Exercises
Exercise:
Complete the array method that will allow you to run a function on each item in the array and return a
new array.
const myList = myArray. ((item) => <p>{item}</p>)
Submit Answer »
Start the Exercise
React ES6 Destructuring
❮ PreviousNext ❯
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.
Destructing Arrays
Here is the old way of assigning array items to a variable:
Before:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];
Here is the new way of assigning array items to a variable:
With destructuring:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;
When destructuring arrays, the order that variables are declared is important.
If we only want the car and suv we can simply leave out the truck but keep the comma:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;
Destructuring comes in handy when a function returns an array:
Example
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
const [add, subtract, multiply, divide] = calculate(4, 7);
Try it Yourself »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Destructuring Objects
Here is the old way of using an object inside a function:
Before:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' +
vehicle.model + '.';
Here is the new way of using an object inside a function:
With destructuring:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
Try it Yourself »
Notice that the object properties do not have to be declared in a specific order.
We can even destructure deeply nested objects by referencing the nested object then using a colon
and curly braces to again destructure the items needed from the nested object:
Example
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
const message = 'My ' + model + ' is registered in ' + state + '.';
}
Try it Yourself »
Yourself With Exercises
Exercise:
Use Destructuring to extract only the third item from the array, into a variable named suv.
const vehicles = ['mustang', 'f-150', 'expedition'];
const [ ] = vehicles;
Submit Answer »
Start the Exercise
React ES6 Spread Operator
❮ PreviousNext ❯
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];
Try it Yourself »
The spread operator is often used in combination with destructuring.
Example
Assign the first and second items from numbers to variables and put the rest in an array:
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
Try it Yourself »
We can use the spread operator with objects too:
Example
Combine these two objects:
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
Try it Yourself »
Notice the properties that did not match were combined, but the property that did match, color, was
overwritten by the last object that was passed, updateMyVehicle. The resulting color is now yellow.
Test Yourself With Exercises
Exercise:
Use the spread operator to combine the following arrays.
const arrayOne = ['a', 'b', 'c'];
const arrayTwo = [1, 2, 3];
const arraysCombined = [ ];
Submit Answer »
Start the Exercise
React ES6 Modules
❮ PreviousNext ❯
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.
Export
You can export a function or variable from any file.
Let us create a file named person.js, and fill it with the things we want to export.
There are two types of exports: Named and Default.
Named Exports
You can create named exports two ways. In-line individually, or all at once at the bottom.
In-line individually:
person.js
export const name = "Jesse"
export const age = 40
All at once at the bottom:
person.js
const name = "Jesse"
const age = 40
export { name, age }
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Default Exports
Let us create another file, named message.js, and use it for demonstrating default export.
You can only have one default export in a file.
Example
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Import
You can import modules into a file in two ways, based on if they are named exports or default
exports.
Named exports must be destructured using curly braces. Default exports do not.
Import from named exports
Import named exports from the file person.js:
import { name, age } from "./person.js";
Try it Yourself »
Import from default exports
Import a default export from the file message.js:
import message from "./message.js";
Try it Yourself »
React ES6 Ternary Operator
❮ PreviousNext ❯
Ternary Operator
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:
Before:
if (authenticated) {
renderApp();
} else {
renderLogin();
Try it Yourself »
Here is the same example using a ternary operator:
With Ternary
authenticated ? renderApp() : renderLogin();
Try it Yourself »
Test Yourself With Exercises
Exercise:
Complete this ternary operator statement.
blue renderBlue() renderRed();
Submit Answer »
Start the Exercise
React Render HTML
❮ PreviousNext ❯
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 ReactDOM.render().
The Render Function
The ReactDOM.render() function takes two arguments, HTML code and an HTML element.
The purpose of the function is to display the specified HTML code inside the specified HTML
element.
But render where?
There is another folder in the root directory of your React project, named "public". In this folder,
there is an index.html file.
You'll notice a single <div> in the body of this file. This is where our React application will be
rendered.
Example
Display a paragraph inside an element with the id of "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
The result is displayed in the <div id="root"> element:
<body>
<div id="root"></div>
</body>
Run Example »
Note that the element id does not have to be called "root", but this is the standard convention.
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
The HTML Code
The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the
JavaScript code:
Do not worry if the syntax is unfamiliar, you will learn more about JSX in the next chapter.
Example
Create a variable that contains HTML code and display it in the "root" node:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Run Example »
The Root Node
The root node is the HTML element where you want to display the result.
It is like a container for content managed by React.
It does NOT have to be a <div> element and it does NOT have to have the id='root':
Example
The root node can be called whatever you like:
<body>
<header id="sandy"></header>
</body>
Display the result in the <header id="sandy"> element:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));
Run Example »
CHAPTER # 4: React JSX
React JSX
❮ PreviousNext ❯
What is JSX?
JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM without
any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
You are not required to use JSX, but JSX makes it easier to write React applications.
Here are two examples. The first uses JSX and the second does not:
Example 1
JSX:
const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Run Example »
Example 2
Without JSX:
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Run Example »
As you can see in the first example, JSX allows us to write HTML directly within the JavaScript
code.
JSX is an extension of the JavaScript language based on ES6, and is translated into regular
JavaScript at runtime.
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Expressions in JSX
With JSX you can write expressions inside curly braces { }.
The expression can be a React variable, or property, or any other valid JavaScript expression. JSX
will execute the expression and return the result:
Example
Execute the expression 5 + 5:
const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
Run Example »
Inserting a Large Block of HTML
To write HTML on multiple lines, put the HTML inside parentheses:
Example
Create a list with three list items:
const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
Run Example »
One Top Level Element
The HTML code must be wrapped in ONE top level element.
So if you like to write two paragraphs, you must put them inside a parent element, like
a div element.
Example
Wrap two paragraphs inside one DIV element:
const myElement = (
<div>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</div>
);
Run Example »
JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.
Alternatively, you can use a "fragment" to wrap multiple lines. This will prevent unnecessarily
adding extra nodes to the DOM.
A fragment looks like an empty HTML tag: <></>.
Example
Wrap two paragraphs inside a fragment:
const myElement = (
<>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</>
);
Run Example »
Elements Must be Closed
JSX follows XML rules, and therefore HTML elements must be properly closed.
Example
Close empty elements with />
const myElement = <input type="text" />;
Run Example »
JSX will throw an error if the HTML is not properly closed.
Attribute class = className
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and
the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.
Use attribute className instead.
JSX solved this by using className instead. When JSX is rendered, it translates className attributes
into class attributes.
Example
Use attribute className instead of class in JSX:
const myElement = <h1 className="myclass">Hello World</h1>;
Run Example »
Conditions - if statements
React supports if statements, but not inside JSX.
To be able to use conditional statements in JSX, you should put the if statements outside of the
JSX, or you could use a ternary expression instead:
Option 1:
Write if statements outside of the JSX code:
Example
Write "Hello" if x is less than 10, otherwise "Goodbye":
const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
const myElement = <h1>{text}</h1>;
Run Example »
Option 2:
Use ternary expressions instead:
Example
Write "Hello" if x is less than 10, otherwise "Goodbye":
const x = 5;
const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
Run Example »
Note that in order to embed a JavaScript expression inside JSX, the JavaScript must be wrapped
with curly braces, {}.
Test Yourself With Exercises
Exercise:
Render a <p> element without using JSX.
const paragraph = React.createElement( , {}, 'This is a paragraph without
using JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(paragraph);
Submit Answer »
Start the Exercise
CHAPTER # 5: React Components
Components are like functions that return HTML elements.
React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML.
Components come in two types, Class components and Function components, in this tutorial we
will concentrate on Function components.
In older React code bases, you may find Class components primarily used. It is now suggested to
use Function components along with Hooks, which were added in React 16.8. There is an optional
section on Class components for your reference.
Create Your First Component
When creating a React component, the component's name MUST start with an upper case letter.
Class Component
A class component must include the extends React.Component statement. This statement creates an
inheritance to React.Component, and gives your component access to React.Component's
functions.
The component also requires a render() method, this method returns HTML.
Example
Create a Class component called Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
Function Component
Here is the same example as above, but created using a Function component instead.
A Function component also returns HTML, and behaves much the same way as a Class component,
but Function components can be written using much less code, are easier to understand, and will
be preferred in this tutorial.
Example
Create a Function component called Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Rendering a Component
Now your React application has a component called Car, which returns an <h2> element.
To use this component in your application, use similar syntax as normal HTML: <Car />
Example
Display the Car component in the "root" element:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Run Example »
Props
Components can be passed as props, which stands for properties.
Props are like function arguments, and you send them into the component as attributes.
You will learn more about props in the next chapter.
Example
Use an attribute to pass a color to the Car component, and use it in the render() function:
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
Run Example »
Components in Components
We can refer to components inside other components:
Example
Use the Car component inside the Garage component:
function Car() {
return <h2>I am a Car!</h2>;
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
Components in Files
React is all about re-using code, and it is recommended to split your components into separate files.
To do that, create a new file with a .js file extension and put the code inside it:
Note that the filename must start with an uppercase character.
Example
This is the new file, we named it "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
export default Car;
To be able to use the Car component, you have to import the file in your application.
Example
Now we import the "Car.js" file in the application, and we can use the Car component as if it was
created here.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Run Example »
Test Yourself With Exercises
Exercise:
Name the following React component "person".
function (props) {
return <h2>Hi, I'm {props.name}</h2>;
}
Submit Answer »
Start the Exercise
CHAPTER # 6: React Class Components
Before React 16.8, Class components were the only way to track state and lifecycle on a React
component. Function components were considered "state-less".
With the addition of Hooks, Function components are now almost equivalent to Class components.
The differences are so minor that you will probably never need to use a Class component in React.
Even though Function components are preferred, there are no current plans on removing Class
components from React.
This section will give you an overview of how to use Class components in React.
Feel free to skip this section, and use Function Components instead.
React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML via a render() function.
Components come in two types, Class components and Function components, in this chapter you
will learn about Class components.
Create a Class Component
When creating a React component, the component's name must start with an upper case letter.
The component has to include the extends React.Component statement, this statement creates an
inheritance to React.Component, and gives your component access to React.Component's
functions.
The component also requires a render() method, this method returns HTML.
Example
Create a Class component called Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
Now your React application has a component called Car, which returns a <h2> element.
To use this component in your application, use similar syntax as normal HTML: <Car />
Example
Display the Car component in the "root" element:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Run Example »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Component Constructor
If there is a constructor() function in your component, this function will be called when the
component gets initiated.
The constructor function is where you initiate the component's properties.
In React, component properties should be kept in an object called state.
You will learn more about state later in this tutorial.
The constructor function is also where you honor the inheritance of the parent component by
including the super() statement, which executes the parent component's constructor function, and
your component has access to all the functions of the parent component ( React.Component).
Example
Create a constructor function in the Car component, and add a color property:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
render() {
return <h2>I am a Car!</h2>;
Use the color property in the render() function:
Example
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
Run Example »
Props
Another way of handling component properties is by using props.
Props are like function arguments, and you send them into the component as attributes.
You will learn more about props in the next chapter.
Example
Use an attribute to pass a color to the Car component, and use it in the render() function:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
Run Example »
Props in the Constructor
If your component has a constructor function, the props should always be passed to the constructor
and also to the React.Component via the super() method.
Example
class Car extends React.Component {
constructor(props) {
super(props);
render() {
return <h2>I am a {this.props.model}!</h2>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car model="Mustang"/>);
Run Example »
Components in Components
We can refer to components inside other components:
Example
Use the Car component inside the Garage component:
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
Components in Files
React is all about re-using code, and it can be smart to insert some of your components in separate
files.
To do that, create a new file with a .js file extension and put the code inside it:
Note that the file must start by importing React (as before), and it has to end with the
statement export default Car;.
Example
This is the new file, we named it Car.js:
import React from 'react';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
export default Car;
To be able to use the Car component, you have to import the file in your application.
Example
Now we import the Car.js file in the application, and we can use the Car component as if it was
created here.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Run Example »
React Class Component State
React Class components have a built-in state object.
You might have noticed that we used state earlier in the component constructor section.
The state object is where you store property values that belongs to the component.
When the state object changes, the component re-renders.
Creating the state Object
The state object is initialized in the constructor:
Example
Specify the state object in the constructor method:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
The state object can contain as many properties as you like:
Example
Specify all the properties your component need:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
Using the state Object
Refer to the state object anywhere in the component by using the this.state.propertyname syntax:
Example:
Refer to the state object in the render() method:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
Run Example »
Changing the state Object
To change a value in the state object, use the this.setState() method.
When a value in the state object changes, the component will re-render, meaning that the output
will change according to the new value(s).
Example:
Add a button with an onClick event that will change the color property:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
Run Example »
Always use the setState() method to change the state object, it will ensure that the component knows
its been updated and calls the render() method (and all the other lifecycle methods).
Lifecycle of Components
Each component in React has a lifecycle which you can monitor and manipulate during its three
main phases.
The three phases are: Mounting, Updating, and Unmounting.
Mounting
Mounting means putting elements into the DOM.
React has four built-in methods that gets called, in this order, when mounting a component:
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
The render() method is required and will always be called, the others are optional and will be called
if you define them.
constructor
The constructor() method is called before anything else, when the component is initiated, and it is
the natural place to set up the initial state and other initial values.
The constructor() method is called with the props, as arguments, and you should always start by
calling the super(props) before anything else, this will initiate the parent's constructor method and
allows the component to inherit methods from its parent (React.Component).
Example:
The constructor method is called, by React, every time you make a component:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
getDerivedStateFromProps
The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.
This is the natural place to set the state object based on the initial props.
It takes state as an argument, and returns an object with changes to the state.
The example below starts with the favorite color being "red", but
the getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:
Example:
The getDerivedStateFromProps method is called right before the render method:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header favcol="yellow"/>);
Run Example »
render
The render() method is required, and is the method that actually outputs the HTML to the DOM.
Example:
A simple component with a simple render() method:
class Header extends React.Component {
render() {
return (
<h1>This is the content of the Header component</h1>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
componentDidMount
The componentDidMount() method is called after the component is rendered.
This is where you run statements that requires that the component is already placed in the DOM.
Example:
At first my favorite color is red, but give me a second, and it is yellow instead:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
Updating
The next phase in the lifecycle is when a component is updated.
A component is updated whenever there is a change in the component's state or props.
React has five built-in methods that gets called, in this order, when a component is updated:
1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()
The render() method is required and will always be called, the others are optional and will be called
if you define them.
getDerivedStateFromProps
Also at updates the getDerivedStateFromProps method is called. This is the first method that is called
when a component gets updated.
This is still the natural place to set the state object based on the initial props.
The example below has a button that changes the favorite color to blue, but since
the getDerivedStateFromProps() method is called, which updates the state with the color from the
favcol attribute, the favorite color is still rendered as yellow:
Example:
If the component gets updated, the getDerivedStateFromProps() method is called:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
changeColor = () => {
this.setState({favoritecolor: "blue"});
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header favcol="yellow" />);
Run Example »
shouldComponentUpdate
In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React
should continue with the rendering or not.
The default value is true.
The example below shows what happens when the shouldComponentUpdate() method returns false:
Example:
Stop the component from rendering at any update:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
Example:
Same example as above, but this time the shouldComponentUpdate() method returns true instead:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
shouldComponentUpdate() {
return true;
changeColor = () => {
this.setState({favoritecolor: "blue"});
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
render
The render() method is of course called when a component gets updated, it has to re-render the
HTML to the DOM, with the new changes.
The example below has a button that changes the favorite color to blue:
Example:
Click the button to make a change in the component's state:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
getSnapshotBeforeUpdate
In the getSnapshotBeforeUpdate() method you have access to the props and state before the update,
meaning that even after the update, you can check what the values were before the update.
If the getSnapshotBeforeUpdate() method is present, you should also include
the componentDidUpdate() method, otherwise you will get an error.
The example below might seem complicated, but all it does is this:
When the component is mounting it is rendered with the favorite color "red".
When the component has been mounted, a timer changes the state, and after one second, the
favorite color becomes "yellow".
This action triggers the update phase, and since this component has
a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty
DIV1 element.
Then the componentDidUpdate() method is executed and writes a message in the empty DIV2
element:
Example:
Use the getSnapshotBeforeUpdate() method to find out what the state object looked like before the
update:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
componentDidUpdate
The componentDidUpdate method is called after the component is updated in the DOM.
The example below might seem complicated, but all it does is this:
When the component is mounting it is rendered with the favorite color "red".
When the component has been mounted, a timer changes the state, and the color becomes "yellow".
This action triggers the update phase, and since this component has a componentDidUpdate method,
this method is executed and writes a message in the empty DIV element:
Example:
The componentDidUpdate method is called after the update has been rendered in the DOM:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
Unmounting
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as
React likes to call it.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
componentWillUnmount
The componentWillUnmount method is called when the component is about to be removed from the
DOM.
Example:
Click the button to delete the header:
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
delHeader = () => {
this.setState({show: false});
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
render() {
return (
<h1>Hello World!</h1>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Container />);
Run Example »
CHAPTER # 7: React Props
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
props stands for properties.
React Props
React Props are like function arguments in JavaScript and attributes in HTML.
To send props into a component, use the same syntax as HTML attributes:
Example
Add a "brand" attribute to the Car element:
const myElement = <Car brand="Ford" />;
The component receives the argument as a props object:
Example
Use the brand attribute in the component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
Run Example »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Pass Data
Props are also how you pass data from one component to another, as parameters.
Example
Send the "brand" property from the Garage component to the Car component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
If you have a variable to send, and not a string as in the example above, you just put the variable
name inside curly brackets:
Example
Create a variable named carName and send it to the Car component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
Or if it was an object:
Example
Create an object named carInfo and send it to the Car component:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
Note: React Props are read-only! You will get an error if you try to change their value.
Test Yourself With Exercises
Exercise:
Create a variable named name and pass it to the Message component.
function Person(props) {
return <h2>I'm { props.name }!</h2>;
}
function Greeting() {
const name = "Jesse"
return (
<>
<h1>Hello!</h1>
<Person name= name />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting />);
Submit Answer »
Start the Exercise
CHAPTER # 8: React Events
Just like HTML DOM events, React can perform actions based on user events.
React has the same events as HTML: click, change, mouseover etc.
Adding Events
React events are written in camelCase syntax:
onClick instead of onclick.
React event handlers are written inside curly braces:
onClick={shoot} instead of onClick="shoot()".
React:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Example:
Put the shoot function inside the Football component:
function Football() {
const shoot = () => {
alert("Great Shot!");
return (
<button onClick={shoot}>Take the shot!</button>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Run Example »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Passing Arguments
To pass an argument to an event handler, use an arrow function.
Example:
Send "Goal!" as a parameter to the shoot function, using arrow function:
function Football() {
const shoot = (a) => {
alert(a);
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Run Example »
React Event Object
Event handlers have access to the React event that triggered the function.
In our example the event is the "click" event.
Example:
Arrow Function: Sending the event object manually:
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Run Example »
This will come in handy when we look at Form in a later chapter.
Test Yourself With Exercises
Exercise:
Complete this statement to include a click event handler.
<button ={clicked()}>Click Me!</button>
Submit Answer »
Start the Exercise
CHAPTER # 9: React Conditional Rendering
In React, you can conditionally render components.
There are several ways to do this.
if Statement
We can use the if JavaScript operator to decide which component to render.
Example:
We'll use these two components:
function MissedGoal() {
return <h1>MISSED!</h1>;
function MadeGoal() {
return <h1>Goal!</h1>;
Example:
Now, we'll create another component that chooses which component to render based on a condition:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
return <MissedGoal/>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
Run Example »
Try changing the isGoal attribute to true:
Example:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={true} />);
Run Example »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Logical && Operator
Another way to conditionally render a React component is by using the && operator.
Example:
We can embed JavaScript expressions in JSX by using curly braces:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
</>
);
const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
Run Example »
If cars.length is equates to true, the expression after && will render.
Try emptying the cars array:
Example:
const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
Run Example »
Ternary Operator
Another way to conditionally render elements is by using a ternary operator.
condition ? true : false
We will go back to the goal example.
Example:
Return the MadeGoal component if isGoal is true, otherwise return the MissedGoal component:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
Run Example »
To learn more, see the ternary operator section.
Test Yourself With Exercises
Exercise:
Use the correct logical operator to complete the following component.
function App({isLoggedIn}) {
return (
<>
<h1>My Application</h1>
{isLoggedIn <Profile /> }
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Submit Answer »
Start the Exercise
CHAPTER # 10: React Lists
React Lists
❮ PreviousNext ❯
In React, you will render lists with some type of loop.
The JavaScript map() array method is generally the preferred method.
If you need a refresher on the map() method, check out the ES6 section.
Example:
Let's render all of the cars from our garage:
function Car(props) {
return <li>I am a { props.brand }</li>;
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
When you run this code in your create-react-app, it will work but you will receive a warning that
there is no "key" provided for the list items.
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Keys
Keys allow React to keep track of elements. This way, if an item is updated or removed, only that
item will be re-rendered instead of the entire list.
Keys need to be unique to each sibling. But they can be duplicated globally.
Generally, the key should be a unique ID assigned to each item. As a last resort, you can use the
array index as a key.
Example:
Let's refactor our previous example to include keys:
function Car(props) {
return <li>I am a { props.brand }</li>;
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Run Example »
Test Yourself With Exercises
Exercise:
Add the attribute that allows React to keep track of elements in lists.
function GroceryList() {
const items = [
{id: 1, name: 'bread'},
{id: 2, name: 'milk'},
{id: 3, name: 'eggs'}
];
return (
<>
<h1>Grocery List</h1>
<ul>
{items.map((item) => <li ={item.id}>{item.name}</li>)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<GroceryList />);
Submit Answer »
Start the Exercise
CHAPTER # 11: React Forms
React Forms
❮ PreviousNext ❯
Just like in HTML, React uses forms to allow users to interact with the web page.
Adding Forms in React
You add a form with React like any other element:
Example:
Add a form that allows users to enter their name:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Run Example »
This will work as normal, the form will submit and the page will refresh.
But this is generally not what we want to happen in React.
We want to prevent this default behavior and let React control the form.
Handling Forms
Handling forms is about how you handle the data when it changes value or gets submitted.
In HTML, form data is usually handled by the DOM.
In React, form data is usually handled by the components.
When the data is handled by the components, all the data is stored in the component state.
You can control changes by adding event handlers in the onChange attribute.
We can use the useState Hook to keep track of each inputs value and provide a "single source of
truth" for the entire application.
See the React Hooks section for more information on Hooks.
Example:
Use the useState Hook to manage the input:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Run Example »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Submitting Forms
You can control the submit action by adding an event handler in the onSubmit attribute for
the <form>:
Example:
Add a submit button and an event handler in the onSubmit attribute:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Run Example »
Multiple Input Fields
You can control the values of more than one input field by adding a name attribute to each element.
We will initialize our state with an empty object.
To access the fields in the event handler use the event.target.name and event.target.value syntax.
To update the state, use square brackets [bracket notation] around the property name.
Example:
Write a form with two input fields:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Run Example »
Note: We use the same event handler function for both input fields, we could write one event
handler for each, but this gives us much cleaner code and is the preferred way in React.
Textarea
The textarea element in React is slightly different from ordinary HTML.
In HTML the value of a textarea was the text between the start tag <textarea> and the end
tag </textarea>.
<textarea>
Content of the textarea.
</textarea>
In React the value of a textarea is placed in a value attribute. We'll use the useState Hook to mange
the value of the textarea:
Example:
A simple textarea with some content:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Run Example »
Select
A drop down list, or a select box, in React is also a bit different from HTML.
in HTML, the selected value in the drop down list was defined with the selected attribute:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
In React, the selected value is defined with a value attribute on the select tag:
Example:
A simple select box, where the selected value "Volvo" is initialized in the constructor:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
Run Example »
By making these slight changes to <textarea> and <select>, React is able to handle all input elements
in the same way.
CHAPTER # 10: React Router
React Router
❮ PreviousNext ❯
Create React App doesn't include page routing.
React Router is the most popular solution.
Add React Router
To add React Router in your application, run this in the terminal from the root directory of the
application:
npm i -D react-router-dom
Note: This tutorial uses React Router v6.
If you are upgrading from v5, you will need to use the @latest flag:
npm i -D react-router-dom@latest
Folder Structure
To create an application with multiple page routes, let's first start with the file structure.
Within the src folder, we'll create a folder named pages with several files:
src\pages\:
Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js
Each file will contain a very basic React component.
Basic Usage
Now we will use our Router in our index.js file.
Example
Use React Router to route to pages based on URL:
index.js:
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Run Example »
Example Explained
We wrap our content first with <BrowserRouter>.
Then we define our <Routes>. An application can have multiple <Routes>. Our basic example only
uses one.
<Route>s can be nested. The first <Route> has a path of / and renders the Layout component.
The nested <Route>s inherit and add to the parent route. So the blogs path is combined with the
parent and becomes /blogs.
The Home component route does not have a path but has an index attribute. That specifies this route
as the default route for the parent route, which is /.
Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error
page.
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Pages / Components
The Layout component has <Outlet> and <Link> elements.
The <Outlet> renders the current route selected.
<Link> is used to set the URL and keep track of browsing history.
Anytime we link to an internal path, we will use <Link> instead of <a href="">.
The "layout route" is a shared component that inserts common content on all pages, such as a
navigation menu.
Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
};
export default Layout;
Home.js:
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js:
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js:
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;
CHAPTER # 10: React Memo
React Memo
❮ PreviousNext ❯
Using memo will cause React to skip rendering a component if its props have not changed.
This can improve performance.
This section uses React Hooks. See the React Hooks section for more information on Hooks.
Problem
In this example, the Todos component re-renders even when the todos have not changed.
Example:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
Run Example »
When you click the increment button, the Todos component re-renders.
If this component was complex, it could cause performance issues.
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Solution
To fix this, we can use memo.
Use memoto keep the Todos component from needlessly re-rendering.
Wrap the Todos component export in memo:
Example:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
Run Example »
Now the Todos component only re-renders when the todos that are passed to it through props are
updated.
❮ PreviousNext ❯
Styling React Using CSS
❮ PreviousNext ❯
There are many ways to style React with CSS, this tutorial will take a closer look at three
common ways:
Inline styling
CSS stylesheets
CSS Modules
Inline Styling
To style an element with the inline style attribute, the value must be a JavaScript object:
Example:
Insert an object with the styling information:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
Run Example »
Note: In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects
also use curly braces, the styling in the example above is written inside two sets of curly braces {{}}.
camelCased Property Names
Since the inline CSS is written in a JavaScript object, properties with hyphen separators,
like background-color, must be written with camel case syntax:
Example:
Use backgroundColor instead of background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
Run Example »
JavaScript Object
You can also create an object with styling information, and refer to it in the style attribute:
Example:
Create a style object named myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
Run Example »
w3schoolsCERTIFIED.2022
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
CSS Stylesheet
You can write your CSS styling in a separate file, just save the file with the .css file extension, and
import it in your application.
App.css:
Create a new file called "App.css" and insert some CSS code in it:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
Note: You can call the file whatever you like, just remember the correct file extension.
Import the stylesheet in your application:
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
CSS Modules
Another way of adding styles to your application is to use CSS Modules.
CSS Modules are convenient for components that are placed in separate files.
The CSS inside a module is available only for the component that imported it, and you do not have
to worry about name conflicts.
Create the CSS module with the .module.css extension, example: my-style.module.css.
Create a new file called "my-style.module.css" and insert some CSS code in it:
my-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
Import the stylesheet in your component:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
export default Car;
Import the component in your application:
index.js:
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Run Example »
Test Yourself With Exercises
Exercise:
Add the following CSS styles inline to the <h1> element
color = "purple"
const Header = () => {
return (
<>
<h1 style= >Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Submit Answer »
Start the Exercise
Styling React Using Sass
❮ PreviousNext ❯
What is Sass
Sass is a CSS pre-processor.
Sass files are executed on the server and sends CSS to the browser.
You can learn more about Sass in our Sass Tutorial.
Can I use Sass?
If you use the create-react-app in your project, you can easily install and use Sass in your React
projects.
Install Sass by running this command in your terminal:
>npm i sass
Now you are ready to include Sass files in your project!
Create a Sass file
Create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss
In Sass files you can use variables and other Sass functions:
my-sass.scss:
Create a variable to define the color of the text:
$myColor: red;
h1 {
color: $myColor;
Import the Sass file the same way as you imported a CSS file:
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Run Example »
CHAPTER # 10: React CSS Styling
CHAPTER # 10: React Hooks
React Hooks
❮ PreviousNext ❯
Hooks were added to React in version 16.8.
Hooks allow function components to have access to state and other React features. Because of
this, class components are generally no longer needed.
Although Hooks generally replace class components, there are no plans to remove classes from
React.
What is a Hook?
Hooks allow us to "hook" into React features such as state and lifecycle methods.
Example:
Here is an example of a Hook. Don't worry if it doesn't make sense. We will go into more detail in
the next section.
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
Run Example »
You must import Hooks from react.
Here we are using the useState Hook to keep track of the application state.
State generally refers to application data or properties that need to be tracked.
Hook Rules
There are 3 rules for hooks:
Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional
Note: Hooks will not work in React class components.
Custom Hooks
If you have stateful logic that needs to be reused in several components, you can build your own
custom Hooks.
We'll go into more detail in the Custom Hooks section.
You might also like
- Report EY Front-End Developer Hiring Test Laks2310No ratings yetReport EY Front-End Developer Hiring Test Laks23104 pages
- 21CSS101J Programming For Problem SolvingNo ratings yet21CSS101J Programming For Problem Solving135 pages
- Unit-Ii Database Design: Er Model & Er DiagramsNo ratings yetUnit-Ii Database Design: Er Model & Er Diagrams81 pages
- Mtech 1 Sem Foundation of Computer Science Mtcs 101 2018 19100% (1)Mtech 1 Sem Foundation of Computer Science Mtcs 101 2018 191 page
- Practical 15: Write Code To Perform Insert, Find, Update, and Delete Operations On Student Database Using Node - Js and MongodbNo ratings yetPractical 15: Write Code To Perform Insert, Find, Update, and Delete Operations On Student Database Using Node - Js and Mongodb10 pages
- DS GTU Study Material Presentations Unit-3 03102019034744AMNo ratings yetDS GTU Study Material Presentations Unit-3 03102019034744AM26 pages
- Web_Essential_IT3401_Technical_Publication_2021_Regulation_No ratings yetWeb_Essential_IT3401_Technical_Publication_2021_Regulation_429 pages
- Write A Program in C# To Demonstrate Command Line Arguments ProcessingNo ratings yetWrite A Program in C# To Demonstrate Command Line Arguments Processing45 pages
- Experiment No.5 Aim: Theory:: Develop An Application That Makes Use of DatabaseNo ratings yetExperiment No.5 Aim: Theory:: Develop An Application That Makes Use of Database7 pages
- Unit 1-PROBLEM SOLVING AND PYTHON PROGRAMMINGNo ratings yetUnit 1-PROBLEM SOLVING AND PYTHON PROGRAMMING85 pages
- 526: Portskewett Archaeological Watching Brief. APAC. LTDNo ratings yet526: Portskewett Archaeological Watching Brief. APAC. LTD23 pages
- 12th Accountancy EM Quarterly Exam 2022 Original Question Paper Tenkasi District English Medium PDF DownloadNo ratings yet12th Accountancy EM Quarterly Exam 2022 Original Question Paper Tenkasi District English Medium PDF Download4 pages
- TOS in ELECTRICAL ENGINEERING 24 October 2023 PRBEENo ratings yetTOS in ELECTRICAL ENGINEERING 24 October 2023 PRBEE4 pages
- Lower Extremity Anatomy: Sari Tri Yulianti, S.FT., M.BiomedNo ratings yetLower Extremity Anatomy: Sari Tri Yulianti, S.FT., M.Biomed73 pages
- 2019-03-28 - JJB - WTP - 01-Flow ProcessNo ratings yet2019-03-28 - JJB - WTP - 01-Flow Process6 pages
- Preparing and Implementing Research InstrumentsNo ratings yetPreparing and Implementing Research Instruments44 pages
- The Level of Cultural Competence Among The BPED and BCAEDNo ratings yetThe Level of Cultural Competence Among The BPED and BCAED12 pages
- Practical Experiment - Reflection and RefractionNo ratings yetPractical Experiment - Reflection and Refraction4 pages
- United States v. David McCoy, 4th Cir. (2000)No ratings yetUnited States v. David McCoy, 4th Cir. (2000)3 pages
