React

resource

Fundamental

Create React App

JSX

Components

Functional

Class

Props vs State

Conditional Rendering

Component Life Cycle

Advanced

Lists and Keys

Basic Hooks

useState

useEffect

Hooks

Context

Refs

Render Props

Code Splitting

Higher Order Components

Portals

Error Boundaries

Fiber Architecture

Ecosystem

Routers

SSR

Next.js

SSG

Next.js

Forms

Testing

State Management

API Calls

Mobile

React Native

Styling

Styled Components

Context / State

Redux

React Hook Form

Jest

Reacting Testing Library

Cypress

Apollo
GraphQL

Axios
REST API

React Router

Review JS

Virtual DOM

Destructuring

an easier way to write expressions to extract data from arrays & objects

Arrays

let cars = ['ferrari', 'tesla', 'ford'];
let [car1, car2, car3] = cars;

Objects

let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
let { x, y, z } = destinations;

Function Parameters

const printCarInfo = ({model, maker, city}) => { console.log(The ${model}, or ${maker}, is in the city ${city}.); };

re-introduction to JS

Intro

Thinking in React

3 high-level parts

Mounting, when the component is being initialized and put into the DOM for the first time

Updating, when the component updates as a result of changed state or changed props

Unmounting, when the component is being removed from the DOM

DOM is represent as object, then only modified part is updated

A virtual DOM object is a representation of a DOM object, like a lightweight copy.

Entire virtual DOM gets updated

Comparing Virtual DOM with its previous version. Figure out which objects have changed

Update only the changed objects on the real DOM

Deploy with Netlify

for beginner

U might not need Redux

React Hot Loader

Intro

DevTools Extension

Advanced

Testing

Leveling Up with React