Wednesday, November 16, 2022

Creating a New React Project - create-react-app

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:
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.

React Project Structure

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

  1. JSX in React
  2. React Declarative Approach
  3. JavaScript Spread Operator

You may also like-

  1. JavaScript Array and Object Destructuring
  2. Angular Project Structure With File Description
  3. Lambda expressions in Java 8
  4. How HashMap internally works in Java

No comments:

Post a Comment