The React.js Handbook

#1 — Introduction to React

Install

#2 — useState & basic project setup structure

const [count, setCount] = useState(0);

#3 — Props, Destructuring and Spreading

import React from "react";const Employee = (props) => {return (<div><h1>Employee Name : {props.firstName} {props.lastName}</h1></div>);};export default Employee;

#4-Conditional rendering

{employees.length > 1 && (<div><h1>Company Directory</h1>{employees.map((employee) => {return <h4>{employee}</h4>;})}</div>)}

#5- React life cycling

Mounting <- decide to show the react component

#6- useEffect with API Requests

// componentDidMount
useEffect(() => {console.log('The use effect run')},[])// componentDidUpdate
useEffect(() => {
console.log('The use effect run')},[count]); // every count update// componentWillUnmount (known as cleanUp function)useEffect(() => {
console.log('The use effect ran');
return () => {
console.log('The return is being ran)}},[])
const [todos, setTodos] = useState();useEffect(() => {axios.get("https://jsonplaceholder.typicode.com/todos").then((res) => {const responseTodos = res.data;setTodos(responseTodos);});}, []);

#7- Context API

React is essentially a one-way data flow that passes data from parent components to child components. However, when creating a component, it is often necessary to manage shared data rather than a one-way data flow.

  • [Consumer] : Re-rending component when context has changed after subscription

#8 Redux

VERY VERY IMPORTANT.

#9 React Hooks

https://www.youtube.com/watch?v=LlvBzyy-558

const count = useMemo(() => countActiveUsers(users), [users]);

# class component

# LifeCycle method

Mount : constructor -> getDerivedStateFromProps -> render -> ComponentDidMount

#10- React Router

in App.jsx, wrap <Router> and in Header, wrap <Switch, Route>

#TypeScript

#Projects

  1. Jest + React Testing Library
  2. Storybook
  3. Next.js / Gatsby
  4. React Native
  • Routing (React Router)
  • Styling(Styled Components)
  • Forms (React Hook Form)
  • Testing(Jest + React Testing Library)
  • Extra (TypeScript/Storybook/Firebase)

--

--

Investor & Software Developer

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