React - A JavaScript library for building user interfaces

Website

• React https://reactjs.org
• Node https://nodejs.org
• npm https://www.npmjs.com
• Babel https://babeljs.io
• Semantic UI https://semantic-ui.com
• CDN https://cdnjs.com
• Faker https://fakerjs.dev
• Jest https://jestjs.io
• Testing Library https://testing-library.com
• Jest DOM https://github.com/testing-library/jest-dom

Package

• create-react-app
• react
• react-dom
• prop-types
• axios
• @faker-js/faker
• @testing-library/react
• @testing-library/jest-dom
• @testing-library/user-event
• jest-cli
• Mock Service Worker

VSCode Extension

• Auto Rename Tag
• Path Intellisense
• CodeSnap
• Thunder Client

Google Chrome Extension

• React Developer Tools
• Debug CSS
• Inspect Element
• Web Developer
• JSON Formatter
• RestMan

Create React App - Simple

Webpack

1. Create new directory and change to directory that you create

mkdir reactapp
cd reactapp 

2. Init node package

npm init -y

3. Install webpack

npm i --save-dev \
webpack-cli \
webpack-dev-server \
path

4. Create a new file webpack.config.js

const path = require("path");

module.exports={
    mode: "development", 
    entry: "./src/index.js", 
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "main.js"
    },
    target: "web",
    devServer: {
        port: "9500",
        static: ["./public"],
        open: true,
        hot: true ,
        liveReload: true
    },
}

5. Create 2 directory

• public
• src

6. Create file index.html to public directory and add 2 line in body

<div id="root"></div>
<script src="main.js"></script>

6. Config start, build to package.json

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },

Babel

7. Add module to webpack.config.js

    resolve: {
        extensions: ['.js','.jsx','.json'] 
    },
    module:{
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use:  'babel-loader'
            },
        ]
    }

8. Create a new file .babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

9. Install babel

npm i --save-dev \
babel-loader \
@babel/preset-env \
@babel/plugin-transform-runtime \
@babel/preset-react

9. Install react

npm i react react-dom

10. Testing Library

npm i -g jest-cli \
&& npm i --save-dev \
jest-environment-jsdom \
@testing-library/jest-dom \
@testing-library/react

11. Create a new file jest.config.js

module.exports = {
    testEnvironment: 'jsdom',
}

Create React App - Full

1. Install react, webpack, babel, linters, path, loader dependencies

npm init -y \
&& npm i react react-dom prop-types \
&& npm i --save-dev \
webpack-cli \
webpack-dev-server \
babel-loader \
@babel/preset-env \
@babel/plugin-transform-runtime \
@babel/preset-react \
path \
style-loader \
css-loader \
jest-environment-jsdom \
@testing-library/jest-dom \
@testing-library/react \
&& npm i -g jest-cli

2. Create a new file webpack.config.js

const path = require("path");

module.exports={
    mode: "development", 
    entry: "./src/index.js", 
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "main.js"
    },
    target: "web",
    devServer: {
        port: "9500",
        static: ["./public"],
        open: true,
        hot: true ,
        liveReload: true
    },
    resolve: {
        extensions: ['.js','.jsx','.json'] 
    },
    module:{
        rules: [
            {
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                use:  'babel-loader' 
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ]
    }
}

3. Create a new file .babelrc

{
    "presets": [
        "@babel/preset-env", 
        "@babel/preset-react" 
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

4. Create a new file jest.config.js

module.exports = {
    testEnvironment: 'jsdom',
}

5. Config start, build, test scripts to package.json

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "jest --watch"
  },

6. Create 2 directory

• public
• src

7. Create file index.html to public directory

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>

8. Create index.js to src directory

import React from "react"
import { createRoot } from "react-dom/client"

const App = () => {
    return <div>Hello World</div>
}

const el = document.getElementById("root")
const root = createRoot(el)
root.render(<App/>)