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

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

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\

4. Start the Development Server

• Run the development server:

npm start

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

• 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;

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