In this tutorial you'll see how to create a new React project using create-react-app. As per React recommendation if
you're learning React or creating a new single-page app, Create React App is the best way to go with it.
Prerequisite for using Create React App
You should have Nodejs (greater than version 14) installed in your system in order to use Create React App environment.
Check this post- How to Install Node.js and NPM in Windows to understand how to download and install NodeJS and NPM (Node Package Manager).
Create React App for Creating React project
If you want to create a React project named myreact-app go to the folder where you want to create this project and run the following command.
npx create-react-app myreact-app
It'll ask for permission to install the create-react-app packages, enter 'y'
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
npx is a package runner tool that comes with npm, that's why NodeJS should be installed in your system.
Wait for the creation of project structure. Once all the packages are installed, initial React project structure as created by create-react-app should look like as given below.
To know more about project structure created by React create-react-app check this post- React create-react-app Project Structure
Running default app
Once project is created change directory to the created project folder.
cd myreact-app
Then run following command to run the app in development mode. This command compiles the app and start the development server.
npm start
If there is no error then it should automatically run the application in your browser or once you see the application is successfully compiled open the browser and type URL- http://localhost:3000/ to see the default application.
Under the hood, create-react-app uses Babel (JavaScript compiler) and webpack (combines every module your project needs into one or more bundles).
Want to create your first React app, check this post- React HelloWorld App - First React App
That's all for this topic Creating a New React Project - create-react-app. If you have any doubt or any suggestions to make please drop a comment. Thanks!
Related Topics
You may also like-
No comments:
Post a Comment