React

• React
  • Useful Links
  • Commands
    • Installation
    • Create new app
    • VS Code Setup
    • Install uuid to create random numbers
    • Build for production
    • In case of npm ERR!

Useful Links

• Blog - various syntax
• Full Tutorial
• 30 min tutorial

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 .

Note: Replace "."(dot) with Directory-name to create app in that directory. The dot represent current directory.

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