Setting Up a React Project: A Beginner's Guide

Installing Node.js and npm

What is Node.js?
Node.js is a runtime environment that allows you to run JavaScript outside the browser. npm (Node Package Manager) is included with Node.js and helps manage packages for JavaScript applications.

Steps to Install Node.js and npm:

  1. Download Node.js:
  2. Install Node.js:
    • Run the downloaded installer and follow the setup instructions.
    • Ensure the checkbox for installing npm is checked.
  3. Verify Installation:
    • Open a terminal and run the following commands:
node -v
npm -v

This displays the installed versions of Node.js and npm.

Creating a React App with Create React App (CRA)

What is CRA?
Create React App is a tool that sets up a new React project with a ready-to-use build system, development server, and default configurations.

Steps to Create a React App:

  • Open a Terminal: Navigate to the folder where you want to create the project.
  • Run the CRA Command
npx create-react-app my-app
  • Replace my-app with your desired project name.
  • Navigate to Your Project:
cd my-app
  • Start the Development Server
npm start

Exploring the Project Structure

When you open the created React app, the folder structure looks like this:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

Key Folders and Files:

  1. public/

    • Contains static assets.
    • index.html: The single HTML file that React renders into.
    • favicon.ico: The app’s icon.
  2. src/

    • Contains the React application code.
    • App.js: Main React component.
    • index.js: Entry point for rendering the React application into the DOM.
  3. node_modules/

    • Stores all dependencies installed via npm.
  4. package.json

    • Lists the project dependencies and scripts.

Running Your First React App

After running npm start, the default app will display a React logo with some starter content. This confirms your React project is successfully set up!

npm start

This will launch a development server, and your app will be accessible at http://localhost:3000 in your web browser. Any changes you make to your code will trigger an automatic refresh.

Best Practices for Setting Up a React Project

  • Use Descriptive Project Names: Helps identify the purpose of the app.
  • Version Control: Initialize a Git repository (git init) and create a .gitignore file (already included by CRA).
  • Install Dev Tools: Add ESLint and Prettier for consistent coding standards:
npm install eslint prettier --save-dev
  • Folder Organization: Separate components, assets, and utilities into specific folders (src/components, src/assets).
  • Update Metadata: Customize public/index.html (e.g., <title> and meta tags) for SEO and branding.