Create React Application
Today we are going to show you how to create your first React JS application. There are multiple ways to create an application in React but today we will use create-react-app package. It provides a modern build setup with no configuration.
Creating React application using create-react-app, Create a new React app from scratch, create react app tutorial, Create React app tutorial for beginners, create react boilerplate, How to install and set up a React app on Ubuntu/Windows.
Ways to Create React Application
- Setup environment for react application
- Install react
- Create react project
- Run application
1. Setup environment for react application
To work with react application, first you have to install Node JS.
Run below command in command-line interface to check Node JS is exist in your system. You can also get the version of node via below command.
1 | node -v (OR node --version) |
If you get an error message like “node is not defined” then you have to install node using the link below.
Note: You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.
2. Install react
We will use create-react-app npm package to create application in React JS. This package will automatically create boilerplate of React application.
Run below command to install package globally.
1 | npm install -g create-react-app |
3. Create react project
After installing React package, you can create a new react application using below command. I choose first-app as project name.
1 | create-react-app first-app |
You can also directly create react app using npx. So you don’t need to install create-react-app package in your system.
1 | npx create-react-app first-app |
4. Run application
To run your created react application, First, you have to jump into the project directory and then you can start the application.
1 2 | cd first-app npm start |
This opens up a new tab on your browser with the URL below.
http://localhost:3000Output
You can deploy your project to production via running below command and it will create your build in the build folder.
1 | npm run build |