How to use React?

This article will help you to know how to use React JS in web applications. React js creates static websites with optimized performance and speed.

Step 1: Install create-react-app npm package

npm install -g create-react-app

• npm – Command to work with node pakages
• install – To install the provided package
• -g – Install globally for all users and add any required environment path entry.
• create-react-app – Package to install. In this case its, create-react-app.

Step 2: Create a reactjs project

npx create-react-app myReactProject
cd myReactProject

npm start

npx – package runner tool that comes with npm 5.2+

This code snippet will create your react project, myReactProject and will start development version on localhost:3000.

Step 3: Write code in App.js

Update App.js file according to your project. The file structure is like this –

myReactProject
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

    Tweet this to help others

Step 4: Production build

Create reactjs project production build using this command –

npm run build

Step 5: Deploy project on server

After running the build command, a production build will be created in build directory under your project. It will contain the static files which you can deploy on your server. The updated file structure will look like this –

myReactProject
├── build
│   ├── static
│       ├── css
│       └── js
│   ├── asset-manifest.json
│   ├── index.html
│   ├── logo.png
│   ├── manifest.json
│   ├── robots.txt
│   └── favicon.ico
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

Now copy the whole content of build folder into the www or htdocs or public_html or any directory on server where your domain name is pointing.

Try to use your react website by entering website address in browser.