How To Build Your First React JS Application

React.js is one of the most popular JavaScript library today. React.js most of use for a frontend side in website development. using the react.js you can make a very smooth web application. In this article, we will share with you how to create the first React.js Application in our local system.

Requirement

If you create first react.js application in a live server or a local system you should me installed the following things in your local system or live server.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:

How to install node.js latest version in ubuntu please visit the following link it will help you install and setup node.js in your local system.

Create a New React App

Run the following command in your terminal for creating a new fresh React.js application.

sudo npx create-react-app my-first-app --use-npm

After done or create React.js application in your local system. application structure looks like bellow.

my-first-app
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package.json
└── README.md

in react.js application main entry point file is src/index.js file.

Run React App

After done create react.js first application our local system then how to run it? just run the following command in the terminal.

cd my-first-app
sudo npm start

After running the above command in terminal then the following output show in your terminal. please see the following screenshot.

Now, run the http://localhost:3000 in your browser and your first react.js application landing page look like:

Conclusion

As you can see, create a react.js application is very easy we hope you like this article. if you like it then please give thumbs up and write the comment regarding any issue or questions.