How to Create React Application - Tutorial For Beginners
create-react-app was made. So, we’ll use the Create React App tool to quickly build out a React application.
As we all know that
create-react-app is the best way to create a basic React app. It not only creates a very basic react web application but also adds the required dependencies needed to run React application.
Before all start, you may need to install Node.js
You can just run the
create-react-app on the command line, followed by the name of the app you want to create and you will get a brand new React application and it’ll come with:
- A predefined folder structure
- Scripts to run React application
- And more!
Let's take a look!
Run below command to get a
create-react-app NPM package in your local machine.
npm install -g create-react-app
In the above command the
-g flag installs the
NPM package globally on the machine.
Once this is done, we’ll use this package to get us a basic boilerplate for React.
Now, run below command to create a react application.
When the script finishes you will see a success message that says:
Success! Created hello-world at your_file_path/hello-world 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 hello-world npm start Happy hacking!
This will create a directory called the
hello-world. Now we need to navigate into the directory and run the command below.
cd hello-world npm start
Once you run the
npm start command, a local development server should start and render the React application at the following location
Bingo!! Your first React application is created.
I hope this tutorial helped you find what you were looking for.
Bookmark it for your future reference. Do comment below if you have any other questions.
P.S. Do share this note with your team.