Create a New React App - npx create-react-app

Last Updated : 09 Dec, 2024

To create a new React app, you can easily use the npx create-react-app command. This command is a fast and simplest way to set up a React project with a pre-configured build setup, so you don’t have to worry about configuring Webpack, Babel, or other development tools.

Zero Configuration: Automatically sets up a React environment.
Fast Setup: Instantly create a new React project.
Pre-configured Development Environment: Includes Webpack, Babel, and more.
Automatic Dependency Installation: Installs React, ReactDOM, and necessary packages.

Steps to Create a React App Using npx create-react-app

Step 1: Install Node.js and NPM

The first step is to install Node.js in your system to create a React application.

You can Install Node and NPM by following our article on- How to install Node on your system?

Step 2: Initialize the React App Using create-react-app

If you have installed an npm version greater than or equal to 5.6, you can use the following npx command to create a new React app:

npx create-react-app app_name

If you are using npm version 5.1 or less, you cannot use the npx command, you need to install the create-react-app globally by using the command

npm install -g create-react-app
create-react-app app_name

Step 3: Switch to the project directory

Once the project is created switch to the project directory using the following command:

cd app_name

Step 4: Start the development server

To run the app, use the following command. This command will locally run your app.

npm start

React Project Structure

The project structure of your React application will look something like this

src: This folder contain all the necessary source code of the project.
public: This folder stores the HTML files and the assests.
node_modules: Dependencies of the project.
package.json: Used dependencies and scripts information.
README.md: Any additional information for documentation.

gfgdirectry — npx create-react-app my_app

Dependencies in the package.json file

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Now Let's modify our react application by making some changes in App.js file

JavaScript

// Filename - App.js
import React from 'react';

function App() {
    const headingStyle = {
        color: 'green',
        textAlign: 'center'
    };

    return <h1 style={headingStyle}>Welcome To GeeksforGeeks!</h1>;
}

export default App;