How to Setup a Project Using React.js: A Step-by-Step Guide

Rio Chandra Avatar

React.js has become one of the most popular JavaScript libraries for building user interfaces, especially single-page applications (SPAs). Whether you’re a beginner or an experienced developer, setting up a React project correctly is crucial for building scalable and maintainable applications.

In this article, we’ll walk through the process of setting up a React project from scratch, including installation, choosing essential packages like a router and state management, and some additional suggestions to help you kickstart your development.

🧰 1. Prerequisites

Before you start, make sure you have the following installed:

  • Node.js: Required to run JavaScript on the server and install packages. You can download it from nodejs.org.
  • npm or yarn: Comes bundled with Node.js. npm is the default package manager for Node.js. Yarn is a faster and more secure alternative.
  • Text editor (e.g., VS Code, Sublime Text)

🛠️ 2. Installation

The easiest and most modern way to set up a React project is by using Vite, a next-generation front-end build tool. It’s faster and more flexible than create-react-app.

Step-by-step:

  1. Open your terminal and run the following command:

    npm create vite@latest my-react-app -- --template react

    Replace my-react-app with your desired project name.

  2. Navigate into the project folder:

    cd my-react-app

  3. Install dependencies:

    npm install

  4. Start the development server:

    npm run dev

    You should now see your React app running at http://localhost:5173 (or similar).

🧭 3. Choosing a Router: React Router

Most React applications require navigation between different views or pages. Since React is a single-page application framework, we use client-side routing, and the most popular library for this is React Router.

Install React Router:

npm install react-router-dom

Basic Setup:

Create a router.js or routes.js file and define your routes:

// src/router.js
import { createBrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

export default router;

Then, use it in your main.jsx or App.jsx:

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import router from "./router";
import { RouterProvider } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

🧠 4. Choosing a State Management Tool

State management can be handled in several ways in React:

  • Local state with useState and useReducer (great for small apps)
  • Context API with useReducer (good for medium-sized apps)
  • Redux Toolkit (best for large apps with complex state)
  • Zustand or Jotai (lightweight, modern alternatives)

📦 Recommendation: Zustand

Zustand is a simple, fast, and scalable state management solution. It reduces boilerplate and makes sharing state across components easier.

Install Zustand:

npm install zustand

Create a store:

// store/useUserStore.js
import create from "zustand";

const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

Use it in a component:

// components/UserProfile.jsx
import { useUserStore } from "../store/useUserStore";

function UserProfile() {
  const { user, setUser } = useUserStore();

  return (
    <div>
      {user ? (
        <p>Welcome, {user.name}</p>
      ) : (
        <button onClick={() => setUser({ name: "John Doe" })}>Login</button>
      )}
    </div>
  );
}

💡 5. Additional Suggestions

Here are a few extra tools and libraries to enhance your React development experience:

🎨 Styling

  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • Styled-components: For component-level styling with real CSS.

🧪 Testing

  • Vitest: A fast and modern test framework that works well with Vite.
  • React Testing Library: For testing React components in a user-centric way.

🧩 Code Quality

  • ESLint + Prettier: Enforce consistent code style and formatting.
  • Husky + lint-staged: Run linters before commits to catch errors early.

📦 Deployment

  • Vercel, Netlify, or GitHub Pages are great for deploying React apps for free.

✅ Summary

Setting up a React project involves more than just installing React. Here’s a quick recap of what we covered:

  1. Installation using Vite
  2. Routing with React Router
  3. State management using Zustand
  4. Additional tools for styling, testing, and deployment

By starting with the right tools and structure, you’ll save time and avoid headaches later. As your project grows, you can always swap out or upgrade packages depending on your needs.

🧑‍💻 Want to Learn More?