Introduction

<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>

npm init -y

Install Prettier

For all project on VSCode

npm i --global prettier

Optional steps: open settings, then set prettier.requireConfig = true and editor.formatOnSave = true

or

For locally in the project folder

npm i -D prettier@2.7.1

npm install --save-dev --save-exact prettier

// package.json
"scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx}\""
  },

Install eslint (handle aturan dalam penulisan code React)

npm install -D eslint@8.24.0 eslint-config-prettier@8.5.0

Create an .eslintrc.json

// .eslintrc.json
{ 
    "extends": ["eslint:recommended", "prettier"],
     "plugins": [], 
     "parserOptions": { 
        "ecmaVersion": 2022, 
        "sourceType": "module", 
        "ecmaFeatures": { "jsx": true } 
    }, 
    "env": { "es6": true, "browser": true, "node": true } 
}

Add this script to package.json:

// package.json
"scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
  },

Git is important in project management and version control

• Initialize project as a Git repo using git init

• Ignore items to be pushed by creating a .gitignore file

Server untuk menjalankan project React Vite

What are the benefits of using build tools?

1. File separation

2. Third-party libraries

3. Minifying and optimize code

npm install -D vite@3.1.4 @vitejs/plugin-react@2.1.0

Install ESLint for React JSX

npm install -D eslint-plugin-import@2.26.0 eslint-plugin-jsx-a11y@6.6.1 eslint-plugin-react@7.31.8

Update .eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0
  },
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  ……………  
}

Create config .env

NODE_ENV=development

Hooks

Applying useState!

Add ESLint rule for hooks.

npm i -D eslint-plugin-react-hooks@4.6.0

Add it into .eslintrc.json file

{
  "extends": [
    …
    "plugin:react-hooks/recommended",
    …
  ]
}

React Router

npm install react-router-dom@6.4.1

npm install react@18.2.0 react-dom@18.2.0