How to Create a React App with Create-React-App? (Complete Guide)

React is one of the popular JavaScript libraries offering numerous features for building websites. It comes with cross-platform compatibility, virtual DOM, and a rich ecosystem that enhances the development and user experience.

Creating a React project is simple once you have a basic understanding of the web technologies used for development. In this blog, we’ll dive into the prerequisites you need to learn and how you can create a React project. We’ll also learn how ReactJS development experts can create a real-world use case website (To-Do list). With that, let’s start!

Why Use React for Web Development?

Using React for web development offers numerous benefits that make it a popular choice among web developers. Here are some key reasons why you might want to use React for your web development projects:

• Reusable Components: React promotes reusability by allowing developers to create self-contained components. That means you can reuse the same components across different parts of your application, saving time and effort.
• Modular Structure: Each part of the application (header, sidebar, button, etc.) is a component. This modularity helps in organizing the code better and makes it easier to debug and test.
• Flexibility: React is a library, not a full-fledged framework, which provides flexibility. Developers can integrate React with other tools, libraries, or even frameworks like Next.js or Gatsby for additional features (routing, SSR, static site generation).
• Efficient Updates: React uses a virtual DOM, which is a lightweight copy of the real DOM. When a change occurs, React compares the new state with the previous one (called “diffing”) and only updates the real DOM where changes are required. This optimizes performance and provides faster updates, especially for large applications.
• Easier to Understand: React’s declarative UI approach allows frontend developers to describe what the UI should look like for different states, and React takes care of updating the UI to match. This simplifies the web development process, especially for complex user interfaces.
• Rich Ecosystem: React has a vast ecosystem of tools, libraries, and development frameworks. This makes it easier to find ready-made solutions and scale projects efficiently.
• Simplified State Management: React introduced Hooks (like useState and useEffect), which allow developers to manage state and side effects directly in functional components. That makes it easier to write cleaner and more concise code.
• React Native for Mobile Apps: React’s architecture can be used not only for web apps but also for mobile applications through React Native. This enables developers to write code that works across different platforms (web, Android, iOS) with minimal changes.
• Server-Side Rendering (SSR): Although React is primarily a client-side library, it can be easily integrated with server-side rendering (using frameworks like Next.js). That improves website SEO of React sites by ensuring effective indexing of content.
• Developer Tools and Ecosystem: It comes with a set of powerful developer tools like React Developer Tools. Plus, it works seamlessly with tools like Babel and Webpack, which simplify the development and debugging process.

These features and benefits of using React make it an ideal choice for building scalable, high-performance websites. Now, let’s discuss some of the basic concepts that will help you with React development.

Prerequisites for Learning React

Before diving into creating a React project, it’s important to have a solid foundation in several web development technologies. While React is beginner-friendly, having a command of these prerequisites will make building a React project simple.

Basic Knowledge of HTML and CSS

• HTML (HyperText Markup Language): React heavily relies on rendering UI components, which are built using HTML-like JSX syntax. Understanding HTML structure (tags, attributes, forms, etc.) will help you create and structure React components effectively.
• CSS (Cascading Style Sheets): Styling in React is done using CSS. You’ll need to know how to apply styles, work with layouts (flexbox, grid), and manipulate designs within components.

JavaScript Fundamentals

• Variables, Functions, and Objects: Know how to declare and use variables, create functions, and manipulate objects.
• ES6+ Syntax: Modern JavaScript features are heavily used in React development. Key ES6+ concepts include:
  • Arrow functions: (args) => expression
  • Destructuring: const { name } = obj
  • Modules: Import and export statements like import React from ‘react’
  • Template literals: Using backticks (` `) for string interpolation.
  • Spread and rest operators: … for merging objects or arrays.
  • Promises & Async/Await: For handling asynchronous operations.
• Array Methods: Be comfortable with methods like map(), filter(), and reduce(), as they are commonly used in React for handling data and rendering lists.

Basics of Node.js and npm

• Node.js: While React runs in the browser, you’ll use Node.js during development to install React and manage dependencies. You don’t need to be an expert in Node.js, but basic knowledge is useful.
• npm (Node Package Manager): npm is the default package manager for Node.js, and you’ll use it to install libraries (like React) and manage your project dependencies. Basic npm commands (npm init, npm install, npm start) are essential.

Understanding of Command Line Interface (CLI)

React development often involves using the CLI for tasks like initializing a React app (npx create-react-app), starting the development server (npm start), and installing dependencies. Familiarity with basic terminal commands will help you navigate and run tasks more efficiently.

Familiarity with REST APIs

React is often used in frontend development to fetch and display data from external sources (APIs). Understanding how to work with REST APIs (using tools like fetch or axios to make requests) will be helpful when building React websites that interact with backend services.

Understanding of Version Control with Git

While not mandatory for learning React, knowing how to use Git for version control is highly recommended for developers. It allows you to track changes, collaborate with others, and easily revert code if needed. Platforms like GitHub are commonly used to store and share React projects.

Once you’re comfortable with these prerequisites, you’re ready to dive into React and start building dynamic, modern web applications. While these prerequisites are helpful, you can still learn React even if you’re not an expert in all of them. However, if you want to build a complex and dynamic website, contacting a ReactJS development company is recommended.

How to Create a React Project?

Creating a React project is simple with tools like Create React App, which automates the setup process. Here’s a step-by-step guide to creating your first basic React project:

Step 1: Install Node.js and npm

Before you can create a React project, you need to install Node.js and npm (Node Package Manager) if you haven’t already done so. These tools are necessary for running the React development server and managing project dependencies.

Visit the official Node.js website and download the latest LTS (Long-Term Support) version. During installation, npm (Node Package Manager) will be installed automatically.

Once done, open your terminal (Command Prompt on Windows or Terminal on macOS/Linux) and run the following commands to verify the installation:

node -v
npm -v

These commands should display the versions of Node.js and npm installed on your system.

Step 2: Install Create React App

To simplify setting up a React project, you can use Create React App. It’s a command-line tool that sets up a new React project with a standard configuration, so you don’t need to worry about manually configuring tools like Webpack or Babel. To install Create React App globally, open your CLI and run the following command:

npm install -g create-react-app

This command installs create-react-app globally on your system, making it accessible from any directory.

Step 3: Create Your React Project

Once you’ve installed create-react-app, you can use it to create a new React project. Open your CLI and run the following command to create a new React project:

npx create-react-app my-react-app

Replace my-react-app with the name you want for your project. This command initializes a new project with all the necessary files and dependencies. After the project is created, navigate to the project folder:

cd my-react-app

Step 4: Start the Development Server

Create React App comes with a built-in development server that you can use to run your project. Run the following command to start the development server:

npm start

This command runs the development server. Your default browser should automatically open at http://localhost:3000, showing the default React welcome page.

Step 5: Understand the Project Structure

Once your project is created, you’ll see several files and folders in your project directory. Here’s a quick overview of the main folders and files:

• public/: Contains the index.html file, which is the root of your application. This is where your React app is mounted.
• src/: Contains your React components, styles, and application logic.
• index.js: The entry point of your app. It renders the App component and mounts it to the DOM.
• App.js: This is the main component where you can start building your app’s UI.
• node_modules/: Contains all the dependencies and libraries installed via npm.
• package.json: A file that lists the project dependencies, scripts, and versioning information.
• .gitignore: Specifies which files and directories should be ignored by Git.

Step 6: Write Your First Component

Let’s create a simple functional component and render it in the App component. In the src folder, create a new file called HelloWorld.js and add the below code:

// src/HelloWorld.js

import React from 'react';
const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};
export default HelloWorld;

Step 7: Render the Component

Open App.js and import the HelloWorld component you created in the previous step:

// src/App.js

import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';
function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}
export default App;

Save the files and check your browser. You should see “Hello, World!” displayed on the screen.

Step 8: Styling Your Components

You can style your components using CSS. Here is a example to create a new CSS file called HelloWorld.css in the src folder:

/* src/HelloWorld.css */

h1 {
  color: blue;
}

Now, import the HelloWorld.css file in HelloWorld.js:

// src/HelloWorld.js

import React from 'react';
import './HelloWorld.css';
const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};
export default HelloWorld;

Save the files and check your browser. The text “Hello, World!” should now be blue.

Step 9: Adding State and Props

Now, let’s add some state and props (properties) to the components we created. Here is how you can modify HelloWorld.js to use the useState hook:

// src/HelloWorld.js

import React, { useState } from 'react';
import './HelloWorld.css';
const HelloWorld = () => {
  const [name, setName] = useState('World');
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setName('React')}>Change Name</button>
    </div>
  );
};
export default HelloWorld;

To pass Props to a component, create a new component called Greeting.js:

// src/Greeting.js

import React from 'react';
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};
export default Greeting;

Once you have created the component, modify App.js to use the Greeting component:

// src/App.js

import React from 'react';
import './App.css';
import Greeting from './Greeting';
function App() {
  return (
    <div className="App">
      <Greeting name="World" />
    </div>
  );
}
export default App;

Step 10: Building and Deploying Your Project

Once you’re ready to deploy your React app, you can build it for production. This command optimizes your app for faster load times and smaller file sizes:

npm run build

This creates an optimized production build in the build/ folder. You can then deploy this folder to any hosting service that serves static files (e.g., GitHub Pages, Netlify, Vercel).

With that, we have seen a complete process of how you can create a React project from scratch. Now, let’s learn how professional ReactJS developers create a real-world website, such as a To-Do list app using React.

Steps to Create a To-Do List App in React

We have seen the general steps to create a React project. Now, let’s learn how you can create a To-Do list app using React as a practice exercise. It will help you understand the fundamental React concepts, such as state management, handling user input, and rendering dynamic lists. Here’s a step-by-step guide to create a basic To-Do list site:

Step 1: Set Up Your React Environment

First, make sure you have Node.js and npm installed. Then create a new React project using Create React App:

npx create-react-app todo-list-app
cd todo-list-app
npm start

Once the development server is running, you’ll see the default React welcome page at http://localhost:3000/.

Step 2: Clean Up the Project Structure

Before building the To-Do site, clean up some of the default files created by Create React App:

• Delete the src/logo.svg file.
• Remove the default content in App.css and App.js, and start fresh.

In App.js, replace the content with a simple functional component:

import React from 'react';
function App() {
  return (
    <div className="App">
      <h1>To-Do List</h1>
    </div>
  );
}
export default App;

Step 3: Define the State for the To-Do List

Here, we’ll use the React useState hook to manage the to-do items and the current input. The state will store:

• The current to-do input (text that the user types).
• The list of to-do items (an array).

Now, update your App.js file to define the state:

import React, { useState } from 'react';
function App() {
  const [task, setTask] = useState(''); // State for the current input
  const [tasks, setTasks] = useState([]); // State for the list of tasks
  return (
    <div className="App">
      <h1>To-Do List</h1>
    </div>
  );
}
export default App;

Step 4: Create a Form to Add To-Dos

Next, create a simple form with an input field to allow users to add new to-do items. When the user submits the form, it will trigger a function that adds the task to the list.

import React, { useState } from 'react';
function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    if (task) {
      setTasks([...tasks, task]); // Add the new task to the list
      setTask(''); // Clear the input field
    }
  };
  return (
    <div className="App">
      <h1>To-Do List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)} // Update task state
          placeholder="Enter a task"
        />
        <button type="submit">Add Task</button>
      </form>
    </div>
  );
}
export default App;

Step 5: Display the To-Do List

Now that we have a way to add tasks, let’s display the list of to-do items below the input form. We’ll map over the tasks array and display each task inside a list item.

import React, { useState } from 'react';
function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    if (task) {
     setTasks([...tasks, task]);
      setTask('');
    }
  };
  return (
    <div className="App">
      <h1>To-Do List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Enter a task"
        />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Step 6: Add a Button to Delete Tasks

To make the app more interactive, let’s add a feature to delete tasks from the list. Each task will have a “Delete” button next to it, and clicking the button will remove the task from the list. Update the App.js file to include a delete function:

import React, { useState } from 'react';
function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    if (task) {
      setTasks([...tasks, task]);
      setTask('');
    }
  };
  const handleDelete = (index) => {
    const updatedTasks = tasks.filter((item, i) => i !== index); // Remove task by index
    setTasks(updatedTasks);
  };
  return (
    <div className="App">
      <h1>To-Do List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Enter a task"
        />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Step 7: Add Basic Styling (Optional)

You can add some basic CSS to make your To-Do List app look more appealing. You can either use plain CSS or install a CSS framework like Bootstrap. Example of simple CSS in App.css:

.App {
  text-align: center;
  font-family: Arial, sans-serif;
}

form {
  margin: 20px;
}

input {
  padding: 10px;
  width: 300px;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li button {
  background-color: #dc3545;
}

li button:hover {
  background-color: #c82333;
}

Final Code (App.js)

Here’s the final version of the App.js file for your To-Do List app after making all the customization:

import React, { useState } from 'react';
import './App.css';
function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    if (task) {
      setTasks([...tasks, task]);
      setTask('');
    }
  };
  const handleDelete = (index) => {
    const updatedTasks = tasks.filter((item, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="App">
     <h1>To-Do List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Enter a task"
        />
        <button type="submit">Add Task</button>
      </form>

      <ul>
        {tasks.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

With that, we’ve successfully created a To-Do list app using React. This app allows users to add, remove, and mark todos as completed. As you become more comfortable with React, you can explore more advanced features and improve your app further. If you are looking to build a highly responsive and complex site, consider hiring ReactJS developers.

FAQs About Creating a React Project

Wrapping Up

Creating a React project is simple once you have a basic understanding of development technologies like HTML, JS, and Node.js. Once you have a basic understanding of these tools, you can start creating a React project.

To begin with, first install Node.js, npm, and Create React App. After that, you will be able to create your React app, build components, and style them. Finally, when you have built the complete site, build and deploy it on the hosting service of your choice.

If you want to practice your understanding, follow the steps to create a To-Do list app. That will help you learn the practical use of various React features. This will help you create basic sites, but if you are looking to create complex and real-time websites, hire ReactJS developers.