Creating a New React Project Using Create React App

Now that you have Node.js , npm , and VS Code installed and set up, it’s time to create your very first React project! This will be your workspace where you’ll write, test, and run your React code. We’ll be using a tool called **Create React App** to make this process easy and fast.

What is Create React App?

Create React App is a tool developed by the React team to help you quickly set up a React project with all the necessary files and configurations. Think of it as a "starter kit" for React. You won’t have to manually set up a bunch of files or worry about configuration—Create React App does all that for you.

It’s like getting a ready-to-cook meal kit. Instead of buying each ingredient separately and figuring out how to prepare them, you get everything neatly packed and ready to use.

Why Use Create React App?

There are many benefits to using Create React App, especially for beginners:

  • Quick setup : It creates all the files you need to start coding right away.
  • No configuration needed : Everything is pre-configured so you don’t have to worry about setting up things like Webpack, Babel, or other tools.
  • Development server : It comes with a built-in server, so you can easily run and test your project as you build it.
  • Ready for production : When you’re ready to publish your project, Create React App will help you create a version of your project that’s optimized for performance.

Step-by-Step Guide: Creating a React Project

Let’s walk through the steps to create your first React project using Create React App .

Step 1: Open Your Terminal

The first thing you need to do is open a terminal (also called a command line). In VS Code, there’s a built-in terminal that you can use, so let’s do that:

  • Open VS Code.
  • Go to the top menu and click on Terminal > New Terminal. This will open the terminal at the bottom of your screen.
  • If you’re not using VS Code, you can open the terminal on your computer by searching for "Command Prompt" (on Windows) or "Terminal" (on macOS/Linux).

Step 2: Navigate to Your Desired Folder

Next, you need to decide where on your computer you want to create your React project. This could be inside a folder where you keep all your coding projects, for example. Here’s how you can navigate to the folder you want to work in:

  • In the terminal, type `cd path/to/your/folder`. Replace `path/to/your/folder` with the actual path of the folder where you want to create the React project.
  • For example, if you have a folder called "ReactProjects" on your Desktop, you would type `cd Desktop/ReactProjects`.
  • If you don’t have a specific folder in mind, you can skip this step, and it will create the project in the folder you’re currently in.

Step 3: Run the Create React App Command

Now comes the exciting part: creating your project! To do this, we’ll use npm (which you installed with Node.js). In the terminal, run the following command:

npx create-react-app my-first-react-app

Here’s what this command does:

  • npx : This is a tool that comes with npm. It allows you to run commands without needing to install the tool globally on your computer.
  • create-react-app : This is the name of the tool we’re using to create the React project.
  • my-first-react-app : This is the name of your project. You can change this to anything you want, but for now, we’ll use this name to keep things simple.

Once you hit Enter , Create React App will start building your project. It might take a minute or two to install everything. During this time, it’s setting up all the necessary files and dependencies for you. You’ll see a lot of messages in the terminal, but don’t worry—this is completely normal!

Step 4: Open Your New React Project

After the installation is complete, you’ll have a new folder called `my-first-react-app` (or whatever you named your project) in the folder where you ran the command. This folder contains all the files for your React project.

  • To navigate into your new project folder, type the following command in the terminal and hit Enter : 
    • cd my-first-react-app
  • This command moves you into your project folder, where you’ll be able to start working with your React code.

Step 5: Start the Development Server

Before you start coding, let’s see if everything is working correctly by running your React project. React comes with a built-in development server that allows you to see your project in action while you’re building it. To start the server, type the following command:

npm start

This will start the development server, and your React app will automatically open in your web browser. By default, it opens on http://localhost:3000 . If everything is set up correctly, you should see the default React welcome page that looks like this:

React logo

Congratulations! You’ve successfully created your first React project and it’s running locally on your computer!

What’s Inside Your New React Project?

Now that your React app is up and running, let’s take a quick look at the project structure. Inside the `my-first-react-app` folder, you’ll see several files and folders that were automatically created for you:

  • node_modules/ : This folder contains all the dependencies (external libraries) that your project needs to run. You don’t need to worry about these files.
  • public/ : This folder contains files that are public, meaning they can be accessed by the user’s browser. It includes files like `index.html`, where your React app is displayed.
  • src/ : This is the most important folder—it contains your React code! You’ll be spending most of your time working inside this folder. Inside, you’ll see:
    • App.js : This is the main component of your React app, where most of your code will go.
    • index.js : This is the entry point for your app. It’s where React renders the `App` component and mounts it to the `index.html` file.
  • package.json : This file lists the dependencies your project needs, along with other metadata like the project name and version.

What’s Next?

Now that you’ve set up your first React project, you’re ready to start building amazing things with React! In the next section, we’ll dive into JSX (JavaScript XML) and see how React allows you to build user interfaces using components.