# React

{%hackmd @Jitesh/reading-theme %}

[TOC]

## Useful Links
- [Blog - various syntax](https://dev.to/ugglr/react-functional-components-const-vs-function-2kj9)
- [Full Tutorial](https://www.youtube.com/watch?v=4pO-HcG2igk&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=8)
- [30 min tutorial](https://www.youtube.com/watch?v=hQAHSlTtcmY&t=1s)
## Commands
### Installation

- First time

sudo rm -rf /var/lib/apt/lists/*
sudo apt-get update

sudo apt install nodejs
node -v
sudo apt install npm

## Only if you want to clean
npm cache clean -f

## Update node to latest stable version
sudo npm install -g n
sudo n stable
hash -r  # To reset the mode version on disply with node -v

- Install app by looking at package.json to create `node_module` folder
`npm install`

- Run Json-Server
`npx json-server --watch data/db.json --port 8000`

### Create new app
`npx create-react-app .`
:::info
Note: Replace "."(dot) with Directory-name to create app in that directory. The dot represent current directory.
:::
:::spoiler The output shows

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created learn-react at /home/jitesh/jg/study/learn-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

:::
### VS Code Setup
- Extentions
- `ES7+ React/Redux/React-Native snippets`
- `Simple React Snippets`
* Inside settings, search for emmet > include Languages, then add `{javascript: javascriptreact}`
- Open your setting.json in vscode and add or edit files.associations like below:

"files.associations": {
    "**/src/**/*.js": "javascriptreact",
    "**/src/**/*.jsx": "javascriptreact"
}

### Install uuid to create random numbers
`npm i uuid`

### Build for production
#### Build

npm run build

#### Run the build app

sudo npm install -g serve
serve -s build

### In case of npm ERR!

npm install --save --legacy-peer-deps