React SetUps and File Structure

aizon

E.Tulasi Ram

Posted on September 3, 2024

React SetUps and File Structure

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:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── reportWebVitals.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
Enter fullscreen mode Exit fullscreen mode
  • 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.
💖 💪 🙅 🚩
aizon
E.Tulasi Ram

Posted on September 3, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related