The React.js Handbook

#1 — Introduction to React

Install

npx create-react-app your-project-name

#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;

or we can do destructure it like {firstName, lastName}, instead of just props.

A useful tip!

https://codesandbox.io/s/props-from-child-to-parent-scjle?file=/src/components/Child.js

#4-Conditional rendering

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

if employee array is less than 1, meaning there’s no employee, should show nothing.

#5- React life cycling

Mounting <- decide to show the react component

updating <- if props come in and will cause to re-render & if the component itself has a state variable

Unmounting <- whenever you want to hide from the page

Each instance of a component has own life cycle that it goes through

The Effect Hook lets you perform side effects in function components:

#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)}},[])

• API requests with useEffect example

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.

To manage data flow in global, Redux can be used. In case of Redux, it is necessary to write bunch of actions and extra code to handle for one action. So, this is why i find it hard to learn and has a learning curve.

The word “Context” might not familiar but don’t get scared. its not that complicated as much as Redux. This is pretty similar concept to deal with UI data.

• [Provider] : A component that notifies the change of Context to components subscribing to Context
• [Consumer] : Re-rending component when context has changed after subscription

Context - React

#8 Redux

VERY VERY IMPORTANT.

#9 React Hooks

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

useEffect

useMemo
its a hook for performance optimization. Since the component is re-rendered, it is wasting resources by calling it even when it is not necessary. useMemo() comes in.

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

in useMemo, 1st param : a function we defined, 2nd param: deps Array

useCallback
useMemo is used to reuse a specific result value, whereas useCallback is used when you want to reuse a specific function without creating a new one.

연산된 값을 재사용하기 위해서는 useMemo()를 사용하고, 특정함수를 재사용하기 위해선 useCallback() 을 사용하고, 컴포넌트 렌더링을 재사용하기 위해선 React.memo를 사용

# class component

# LifeCycle method

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

#10- React Router

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

# State Management — Redux(Including Redux Toolkit)

# React Hooks

# Practice React

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

#TypeScript

#Projects

DividendDB with Graph

OXINOIN with Map

React hooks

Extra

1. React Query
2. Jest + React Testing Library
3. Storybook
4. Next.js / Gatsby
5. React Native

Fundamentals (Functional components, JSX, Props and State, Hooks, Lists and Keys)

Ecosystem

• State management (Redux)
• Routing (React Router)
• Styling(Styled Components)
• Forms (React Hook Form)
• Testing(Jest + React Testing Library)
• Extra (TypeScript/Storybook/Firebase)