# Introduction

```html
<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
```

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

### Install eslint (handle aturan dalam penulisan code React)

<pre><code><strong>npm install -D eslint@8.24.0 eslint-config-prettier@8.5.0
</strong></code></pre>

Create an .eslintrc.json

```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:

```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

```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

```json
{
  "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
```