DEV Community

T Shiva Kumar
T Shiva Kumar

Posted on

Getting Started With React

Here’s a detailed guide on how to install and set up a React project:

1. Install Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript on the server side, and npm (Node Package Manager) is a tool for managing packages (libraries) for Node.js.

  • Download and install Node.js from Node.js official website. The installation includes npm, so you don't need to install npm separately.
  • Verify installation:
node -v
npm -v

Enter fullscreen mode Exit fullscreen mode

These commands should print the versions of Node.js and npm if the installation was successful.
2. Create a New React Project
Using npx (recommended):

  • Open a terminal (Command Prompt on Windows, Terminal on macOS/Linux).
  • Run the following command:
npx create-react-app my-react-app

Enter fullscreen mode Exit fullscreen mode

Replace my-react-app **with your desired project name. This command uses **npx to run create-react-app without installing it globally.

3. Navigate to Your Project Directory

Change to your project folder:

cd my-react-app

Enter fullscreen mode Exit fullscreen mode

4. Start the Development Server

  • Run the development server:
npm start

Enter fullscreen mode Exit fullscreen mode

This command starts the development server and opens your application in the default web browser at http://localhost:3000. The server will automatically reload the page whenever you make changes to the source code.

5. Explore the Folder Structure

Here’s a breakdown of the folder structure created by create-react-app:

  • public/: Contains static files that are served directly by the server.

    index.html: The main HTML file where your React app is injected.
    favicon.ico:The icon displayed in the browser tab.

  • src/: Source code of the React app.
    index.js: Entry point that renders the root component.
    App.js: Main React component to edit and display content.

  • node_modules/: Installed npm packages.

  • package.json: Project metadata, dependencies, and scripts.

  • package-lock.json: Locks dependency versions.

  • .gitignore: Files and directories to be ignored by Git.

  • README.md: Documentation for your project.

Create a React Component

  • React components can be either class-based or function-based. Function components are more common, especially with the use of Hooks. Here's an example of a simple function component:
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode
  • This component returns some JSX, which looks like HTML but is actually JavaScript.

Top comments (0)