8401. Getting Started with React
React

Go through official React tutorial to build a hello world app.

1. ReactJS

ReactJS is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It uses the virtual DOM to track the state of the actual DOM, only re-rendering discrete sections of the DOM as changes to application state dictate. React is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

2. Creating React App

Install ‘create-react-app’ globally.

$ npm install create-react-app -g

Use ‘create-react-app’ to create new React application named ‘react-app’

$ create-react-app react-app

Open ‘react-app’ in Visual Studio Code. image

3. Serving the Application

Start ‘react-app’ through npm.

$ npm start

image Open http://localhost:3000 to view it in the browser. image

You can make it serve at different port. Open package.json, add ‘PORT’ option to ‘start’ script. For example, set the port to 12090 as follows.

"scripts": {
  "start": "PORT=12090 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

Run ‘npm start’ again. Now, this application is served at port ‘12090’. image

4. References