DEV Community

Cover image for How to create a react project from scratch
Ticha Godwill Nji
Ticha Godwill Nji

Posted on

How to create a react project from scratch

React is an open-source javascript library for building front-end applications. React lets you build user interfaces out of individual pieces called components.

You can create your own Button, Thumbnail and Hamburger menu component in React and combine them together to form a navigation menu.

To start a new project in React, you need to follow the following steps

Step 1: Setting Up the Environment

Before starting a new project in react, you need to make sure that you have NodeJS install on your system. You can download the latest version of node at https://nodejs.org. Follow the instructions on the node website to do the installation.

After installing node, there's another important thing you need to install called NPM(node package manager). npm will install JavaScript packages in your project and also keep track of details about the project.

Step 2: Creating a New Project

  • Open your terminal or command promt and navigate to the folder or directory that you want to create the project and run the code below
npx create-react-app my-react-app

Enter fullscreen mode Exit fullscreen mode
  • Note that my-react-app is the name of the application and you can replace with the desired name of your project.

Step 3: Running the Project

  • Navigate to Your Project Directory: Once the project is created, navigate into the project directory:
cd my-react-app

Enter fullscreen mode Exit fullscreen mode
  • Run the following command to start the application on a development server:
npm start

Enter fullscreen mode Exit fullscreen mode

This command will start the development server and open your default web browser to view your React application. You can now start editing your React components in the src directory. Any changes you make will be automatically reflected in your browser.

Top comments (2)

Collapse
 
rgolawski profile image
Rafał Goławski

Interesting read! 🤔 However, I respectfully suggest considering Vite for new React projects. CRA is no longer recommended in the official React docs - instead, we can find Next.js or Remix there. These alternatives are less bloating, offer faster build times, and gives you more flexibility. But again, it's all about what suits your preferences best. 👍

Collapse
 
ticha profile image
Ticha Godwill Nji

That's great to hear, thanks for your suggestion Rafal. I will explore it!