20210905124153-react.org

React

• Was first released in 2013
• Was original created by Jordan Walke
• Has well over 100k starts on GitHub
• Is maintained by Facebook

Courses

🔴 Let’s build a Modern Portfolio with NEXT.JS

Framer Motion, Tailwind CSS, Sanity.io, React

🔴 Let’s build a Modern Portfolio with NEXT.JS (Framer Motion, Tailwind CSS, S…

Build and Deploy a React Admin Dashboard App

With Theming, Tables, Charts, Calendar, Kanban and More

Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More - YouTube

React Course For Beginners

Learn React in 8 Hours

React Course For Beginners - Learn React in 8 Hours - YouTube

[[id:bab0ab23-0060-465e-942e-546d875bbd1e][React Course [2022]​]]

Beginner's Tutorial for React JavaScript Library

React Course - Beginner’s Tutorial for React JavaScript Library {2022} - YouTube

Full React Course 2020

Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks

Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks - YouTube

Full Stack React & Firebase Tutorial

Build a social media app

Full Stack React & Firebase Tutorial - Build a social media app - YouTube

Useful information

Use function based components for Redux.

Immer

Immer: Immutability the easy way

Introduction

A quick example for comparison

Without Immer

const baseState = [
    {
        title: "Learn TypeScript",
        done: true
    },
    {
        title: "Try Immer",
        done: false
    }
]

const nextState = baseState.slice() // shallow clone the array
nextState[1] = {
    // replace element 1...
    ...nextState[1],            // with a shallow clone of element 1
    done: true                  // ...combined with the desired update
}
nextState.push({title: "Tweet about it"})
console.log(nextState)

With Immer

import produce from "immer"

const baseState = [
    {
        title: "Learn TypeScript",
        done: true
    },
    {
        title: "Try Immer",
        done: false
    }
]

const nextState = produce(baseState, draft => {
    draft[1].done = true
    draft.push({ title: "Tweet about it" })
})
console.log(nextState)

export default function ImmerPage() {
    return (
        <div className="container">
            <main>
                {nextState.map((todo, i) => {
                    return <pre key={i}>{todo.title}</pre>
                })}
            </main>
        </div>
    )
};

How Immer works

Using Immer is like having a personal assistant. The assistant takes a letter (the current state) and gives you a copy (draft) to jot changes onto. Once you are done, the assistant will take your draft and produce the real immutable, final letter for you (the next state).

Installation

Immer can be installed as a direct dependency, and will work in any ES5 environment:

Yarn: yarn add immer

NPM: npm install immer

CDN: Exposed global is immer

Unpkg: <script src=”https://unpkg.com/immer”></script>

JSDelivr: <script src=”https://cdn.jsdelivr.net/npm/immer”></script>

⚠ When using a CDN, it is best to check the url in your browser and see what version it resolves to, so that your users aren’t accidentally served a newer version in the future when updates are release. So use an url like: https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js instead. Substitute production.min with development in the URL for a development build.

The following features can be opt-in to:

Feature	Method to call
ES 5 support	enableES5()
ES2015 Map and Set support	enableMapSet()
JSON Patch support	enablePatches()
All of the above	enableAllPlugins()

For example, if you want to use produce on a Map, you need to enable this feature once during the start of your application:

In your application’s entrypoint

const {enableMapSet} = require("immer")

enableMapSet()

…Later

const produce = require('immer');

const usersById_v1 = new Map([
    ["Thaen", { name: "Nopanun Laochunhanun", country: "NL" }]
])

const usersById_v2 = produce(usersById_v1, draft => {
    draft.get("Thaen").country = "TH"
})

module.exports = function MapsetPage() {
    return { v1: usersById_v1, v2: usersById_v2 }
}

const usersById = require('./mapset');

expect(usersById().v1.get("Thaen").country).toBe("NL")
expect(usersById().v2.get("Thaen").country).toBe("TH")

JEST

Getting Started

Install as dev Dependency

function sum(a, b) {
  return a + b;
}
module.exports = sum;

const sum = require('./sum');

test('adds 1 + 2 to eq 3', () => {
    expect(sum(1, 2)).toBe(3);
});