React Quickstart
Overview
React is a:
- Component-Based
- Declarative
JavaScript library for building user interfaces.
import React from "react";
import ReactDOM from "react-dom";
class Greetings extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
ReactDOM.render(
<Greetings name={"Kenneth McCormick"} />,
document.getElementById("root")
);
Components
Components let you split the UI into
- independent,
- reusable pieces,
and think about each piece in isolation.
React lets you define components as classes or functions.
constructor(props)constructor
render()render
Should return:
It should be pure, predictable, and it does not interact directly with the browser.
- React elements
- Arrays and fragments.
- Portals
- String and numbers
- Booleans or null
componentDidMount() {
// Logic goes here
}componentDidMount
After all the elements of the page is rendered correctly, this method is called.
This method is the perfect place to fetch data from an API endpoint and then call setState to re-render component with updated data.
componentDidUpdate(prevState, prevProps) {
// Logic goes here
}componentDidUpdate
This method is called when a component got updated. This might happen if new props have been provided by a parent component or an internal state has been changed.
The componentDidUpdate function receives previous props and state as parameters.
shouldComponentUpdate(nextProps, nextState) {
// Logic goes here
}shouldComponentUpdate
shouldComponentUpdate function is being called before an update
componentWillUnmount() {
// Logic goes here
}componentWillUnmount
componentWillUnmount is the last function to be called immediately before the component is removed from the DOM.
Let's make a Dice Game
PureComponent
PureComponent is exactly the same as Component except that it handles the shouldComponentUpdate method for you.
When props or state changes, PureComponent will do a shallow comparison on both props and state.
Functional Component
A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
No setState(), no lifecycle methods... no happiness, no life....
Functional Component
No setState(), no lifecycle methods... no happiness, no life....
A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
React Hooks
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
Hooks let you "hook into" the underlying lifecycle and state changes of a component within a functional component. More than that, they often also improve readability and organization of your components
useState
useState is used to handle state in a functional component.
import React, { useState } from 'react';
function CountApp() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useEffect
useEffect adds the ability to perform side effects from a function component.
import React, { useState } from 'react';
function ChatApp() {
useEffect(() => {
// login and fetch messages
// (componentDidMount and/or componentDidUpdate)
return () => {
// logout (componentWillUnmount)
};
}, [ /* properties to watch */]);
return (
<></>
);
}Rules of Hooks
- Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
- Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions.
React Quickstart
By Stanislav Oaserele
