DEV Community

Cover image for How to Create a React App
Agbo, Daniel Onuoha
Agbo, Daniel Onuoha

Posted on • Edited on

2

How to Create a React App

React is a powerful JavaScript library for building user interfaces, developed by Facebook. It simplifies the process of creating dynamic, interactive web applications. This guide will walk you through creating a React application from scratch.

Prerequisites

Before you start, ensure you have the following installed on your system:

  1. Node.js and npm:

     node -v
     npm -v
    
  2. Text Editor:

    Use any code editor you choose, such as Visual Studio Code.

Step 1: Install create-react-app

create-react-app is an official tool by the React team to quickly set up a new React project with a good default configuration.

  • Open your terminal or command prompt and install create-react-app globally:
  npm install -g create-react-app
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a New React App

  1. Navigate to Your Project Directory: Choose where you want your project to reside. For example:
   cd Desktop
Enter fullscreen mode Exit fullscreen mode
  1. Create the React App: Replace todolist with your desired project name:
   npx create-react-app todolist
Enter fullscreen mode Exit fullscreen mode
  • This command creates a new folder (todolist) with all the necessary files and dependencies.

cra react app

cra finished

  1. Navigate into the Project Folder:
   cd todolist
Enter fullscreen mode Exit fullscreen mode

Step 3: Start the Development Server

Run the following command to launch the development server:

npm start
Enter fullscreen mode Exit fullscreen mode

npm start

  • Your default browser should open automatically, displaying the React app at http://localhost:3000.
  • If it doesn’t, manually open your browser and go to that address.

Image description

Step 4: Explore the Project Structure

Here's an overview of the files and folders created by create-react-app:

todolist/
├── node_modules/
├── public/
│   ├── index.html       // Main HTML file
├── src/
│   ├── App.js           // Main React component
│   ├── index.js         // Entry point for the React app
│   └── App.css          // Styling for the App component
├── .gitignore
├── package.json         // Project metadata and dependencies
└── README.md
Enter fullscreen mode Exit fullscreen mode

Step 5: Modify Your React App

  1. Edit the Main Component (App.js): Open src/App.js in your text editor and customize the JSX to change the content:
   function App() {
     return (
       <div className="App">
         <h1>Hello, React!</h1>
       </div>
     );
   }

   export default App;
Enter fullscreen mode Exit fullscreen mode
  1. Save Changes and See Updates: After saving, the browser automatically refreshes to reflect your changes.

Conclusion

Congratulations! You've successfully created and run your first React app. This setup provides a solid foundation for building powerful, component-based web applications. Explore React components, state management, and hooks to enhance your skills further!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay