The create react app command allows us to create a development environment and install all necessary libraries for creating single-page applications using React. The CRA tool is used to set up a new React project quickly, providing a standard structure and configuration. It includes a development server, build scripts, and support for modern JavaScript features and CSS preprocessors. It allows us to use the latest JavaScript features. 

Let’s see a step-by-step guide to create a new react application.

Prerequisites:

To create a new React app, you need to have the following installed on your system:

• Node ( version >= 14.0.0 )
• npm ( version >= 5.6 )

React Environment Setup

• Go to the NodeJS official website to download and install NodeJS locally (download NodeJS).
• Similarly download and install npm using the official website, if not installed.
• Once installed, open up an editor like Visual Studio Code.
• Use the terminal of the editor to create a new React app.

Steps to Create React App

Step 1: 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 than this, you cannot use the npx command, you need to install the create-react-app globally. Then, you can use the following command to create a new React app:

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

The create-react-app command will create a frontend. It will not create any backends or databases. After running the above command the following React app directory structure will be created:

Step 2: Switch to the project directory

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

cd app_name

Step 3: Start the developement server

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

npm start

React Project Structure

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

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"
},

Example: Below is an example of React App to display Hello gfg:

// Filename - index.js 
import React from 'react';
import ReactDOM from 'react-dom';

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

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

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Gfg />);

Start your application using the following command:

npm start

Output: