Skip to main content

Setting Up Your React Project

Prerequisites:

After following previous chapter you should have all dependencies installed to get started with react

  • Node.js and npm (or yarn): You'll need Node.js (version 14 or above recommended) and its package manager (npm or yarn) installed on your system. You can download them from the official Node.js website: https://nodejs.org/en

Option 1: Create React App (Recommended for Beginners)

Create React App (CRA) is a popular tool that streamlines the setup process for new React projects. It includes essential tools, configurations, and a development server out of the box.

  1. Open your terminal: Launch your command prompt or terminal application.

  2. Create a new project: Navigate to your desired project directory and run the following command:

    npx create-react-app my-app

    Replace my-app with your preferred project name.

  3. Navigate to the project directory: Once the creation process is complete, change directories to your new project:

    cd my-app

  4. Start the development server: Run the following command to start the development server:

    npm start

    This will typically launch your React application in a new browser tab, usually at http://localhost:3000/.

    You should see a screen similar to this:

    React App
note

Now you're all set! now you can move to next chapter or you can learn Manual setup (not for beginners)

Option 2: Manual Setup (For More Control)

If you prefer more control over the project setup or have specific requirements, you can set up a React project manually.

  1. Project Initialization:

    • Create a new directory for your project.
    • Initialize a new npm project by running npm init -y in the project directory. This creates a package.json file.

  2. Install React and ReactDOM:

    Use npm to install the required React packages:

    npm install react react-dom

  3. Create React Components:

    • Create JavaScript files (e.g., App.js) for your React components.
    • Import React from react and use JSX syntax to define your components.

  4. Set Up Entry Point:

    • Create a main entry point (e.g., index.js) for your application.
    • Import your main component (e.g., App) and render it using ReactDOM.render.

  5. Start a Development Server (Optional):

    • You can use a separate development server like webpack-dev-server for hot reloading and a more streamlined development experience. Refer to their documentation for setup instructions.

Running the Project (Manual Setup):

  1. Start the development server if you set one up.
  2. Otherwise, open the HTML file containing your React component rendering code (e.g., index.html) in a web browser.

We recommend using Create React App command for quick development setup.