Getting started with React Application : How to install and setup React Application

React(ReactJS) is a component based declarative JavaScript library for building user interfaces. It has been developed and maintained by Facebook and community. In this post I will use "create-react-app" tool to create ReactApp.

Prerequisite: I am using homebrew to install all required softwares. Install homebrew

Step-1. Install node.js:  node is required to run tool create-react-app which setup react app in single command. Install node.js using below command or download node.js.

m-c02z31rnlvdt:~ n0r0082$ brew install node
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> New Formulae
.....
......
==> Summary
🍺  /usr/local/Cellar/icu4c/64.2: 257 files, 69.2MB
==> Installing node
==> Downloading https://homebrew.bintray.com/bottles/node-13.5.0.mojave.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/59/59bfd67c59d4af7643a12d9?__gd
######################################################################## 100.0%
==> Pouring node-13.5.0.mojave.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/13.5.0: 4,663 files, 59.1MB
==> Caveats
-----
-------
For compilers to find icu4c you may need to set:
  export LDFLAGS="-L/usr/local/opt/icu4c/lib"
  export CPPFLAGS="-I/usr/local/opt/icu4c/include"

==> node
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

Validate node installation

m-c02z31rnlvdt:~ n0r0082$ node -v
v13.5.0
m-c02z31rnlvdt:~ n0r0082$ npm -v
6.13.4
m-c02z31rnlvdt:~ n0r0082$ which node
/usr/local/bin/node

Step-2: Install create-react-app tool which has enriched with all required utility and packages to setup react application with just one single command. -g indicates tool installed globally so that it can be executed from anywhere.

m-c02z31rnlvdt:reactApp n0r0082$ sudo npm install create-react-app -g 
Password:
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.3.0
added 91 packages from 45 contributors in 13.17s

Step-3: Crate react application using above installed tool create-react-app. Application name is my-first-app. --scripts-version only enforce structure of project created not react version.

m-c02z31rnlvdt:Learing n0r0082$ create-react-app my-first-app --scripts-version 1.1.5

Creating a new React app in /Users/n0r0082/Learing/my-first-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

......
........

added 1383 packages from 748 contributors and audited 14828 packages in 69.561s

18 packages are looking for funding
  run `npm fund` for details

found 40 vulnerabilities (29 low, 5 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Success! Created my-first-app at /Users/n0r0082/Learing/my-first-app
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!

We suggest that you begin by typing:

  cd my-first-app
  npm start

Happy hacking!

Step-4: Go to location where my-first-app has been created. Start server using npm start. Once server is started, open browser and hit URL http://localhost:3000/

m-c02z31rnlvdt:my-first-app n0r0082$ npm start 

> my-first-app@0.1.0 start /Users/n0r0082/Learning/my-first-app
> react-scripts start


Compiled successfully!

You can now view my-first-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.0.3:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

my-first-app structure in VStudio:

Open App.js and make some changes and immediately it will be reflected in UI.

Reference: https://github.com/facebook/create-react-app