React Tutorial — Learn React in 5 hours — Part 3

React functional component

Create a Function Component

Example:
Create a Function component called Bike
function Bike() {
return <h2>Hi, I am a Bike!</h2>;
}
Example:
Display the Bike component in the "root" element:
ReactDOM.render(<Bike />, document.getElementById('root'));
Create a Function Component

Props

Example:
Use an attribute to pass a color to the Bike component, and use it in the render() function:
function Bike(props) {
return <h2>I am a {props.color} Bike!</h2>;
}
ReactDOM.render(<Bike color="black"/>, document.getElementById('root'));
Props

Components in Components

Example:
Use the Bike component inside the Garage component:
function Bike() {
return <h2>I am a Bike!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Bike />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Components in Components

Components in Files

Example:
This is the new file, we named it "Bike.js":
function Bike() {
return <h2>Hi, I am a Bike!</h2>;
}
export default Bike;
Example:
After importing the "Bike.js" file, we can use the Bike component as though it were created here.
import React from 'react';
import ReactDOM from 'react-dom';
import Bike from './Bike.js';
ReactDOM.render(<Bike />, document.getElementById('root'));
Components in Files

React Hooks

What is a Hook?

Example:
The following is an example of a Hook.If it does not make sense, don't worry about it. We'll explain it more in this section..
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("yellow");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("yellow")}
>Yellow</button>
<button
type="button"
onClick={() => setColor("black")}
>Black</button>
<button
type="button"
onClick={() => setColor("purple")}
>Purple</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
React Hooks

Hook Rules

  • 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: React class components do not support hooks.

React useState Hook

Import useState

Example:
At the top of your component, import the useState Hook.
import { useState } from "react";

Initialize useState

  • The current state.
  • A function that updates the state.
Example:
The function component should be initialized at the top.
import { useState } from "react";function FavoriteColor() {
const [color, setColor] = useState("");
}
Variables can be named anything you like.

Read State

Example:
In the rendered component, use the state variable.
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("yellow");
return <h1>My favorite color is {color}!</h1>
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Read State

Update State

Example:
Use a button to update the state:
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("yellow");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
</>
)
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Update State

What Can State Hold

Example:
Create multiple state Hooks:
import { useState } from "react";
import ReactDOM from "react-dom";
function Bike() {
const [brand, setBrand] = useState("BMW");
const [model, setModel] = useState("BMW R nineT");
const [year, setYear] = useState("1960");
const [color, setColor] = useState("black");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
ReactDOM.render(<Bike />, document.getElementById('root'));
What Can State Hold
Example:
Create a single Hook that holds an object:
import { useState } from "react";
import ReactDOM from "react-dom";
function Bike() {
const [bike, setBike] = useState({
brand: "BMW",
model: "BMW R nineT",
year: "1960",
color: "black"
});
return (
<>
<h1>My {bike.brand}</h1>
<p>
It is a {bike.color} {bike.model} from {bike.year}.
</p>
</>
)
}
ReactDOM.render(<Bike />, document.getElementById('root'));
What Can State Hold

Updating Objects and Arrays in State

Example:
Use the JavaScript spread operator to update only the color of the bike:
import { useState } from "react";
import ReactDOM from "react-dom";
function Bike() {
const [bike, setBike] = useState({
brand: "BMW",
model: "BMW R nineT",
year: "1960",
color: "black"
});
const updateColor = () => {
setBike(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {bike.brand}</h1>
<p>
It is a {bike.color} {bike.model} from {bike.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
ReactDOM.render(<Bike />, document.getElementById('root'));
Updating Objects and Arrays in State

--

--

--

Idea to Implementation infotech is not only a globally recognized IT company but also a family filled with talented Expert that help global brands, enterprises,

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Note To Self — How To Hide API Key in React

10 React Native Libraries to Use in Your Next Project

Quickly Generate Google Fonts Preview

Only 3 Minutes to Grasp the Importance and the Concept of REDUX Pattern

Blazor in depth — Create Blazor component without Lifecycle methods

Angular vs. React vs. Vue: A 2018 Comparison

Redux Hooks in React: An Introduction

Covert String to Title Case in Typescript and Javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Idea To Implementation Infotech

Idea To Implementation Infotech

Idea to Implementation infotech is not only a globally recognized IT company but also a family filled with talented Expert that help global brands, enterprises,

More from Medium

React Tutorial — Learn React in 5 hours — Part 2

React class component

How to Fetch Data From API in ReactJS.

coverImage

React Marvel API Project with Source Code

Difference Between Class Based And Function Based Components (REACT.JS) [Which is Better?]