1. Installing Node.js

React requires Node.js and npm (Node Package Manager) to manage dependencies and run the development server. Follow these steps:

1. Download and install Node.js from the official website.
2. Verify installation by running the following commands in your terminal:

   node -v
   npm -v
                           

   These commands will display the installed versions of Node.js and npm.

2. Creating a React Application

React provides an official tool called create-react-app to quickly set up a new project. Here’s how:

1. Open your terminal and run:

   npx create-react-app my-app
                           

   Replace my-app with your desired project name.
2. Navigate to the project folder:

   cd my-app
                           

3. Start the development server:

   npm start
                           

   This will launch your application in the browser at http://localhost:3000.

3. Project Structure Overview

After creating a React project, the folder structure will look like this:

my-app/
├── node_modules/        # Project dependencies
├── public/              # Static files
│   ├── index.html       # Main HTML file
├── src/                 # Application source code
│   ├── App.css          # CSS for App component
│   ├── App.js           # Main component
│   ├── index.js         # Entry point
├── package.json         # Project configuration
                

Key Files:

• index.js: Entry point for your React application.
• App.js: Main React component for your application.
• index.html: Contains the root <div> where React renders the application.

4. Running the Application

After starting the development server, you can make changes in the App.js file. For example, modify the default content:

function App() {
    return (
        

            
Welcome to My First React App
            
Start building amazing applications!
        
    );
}

export default App;
                

Save the file and observe the changes in your browser.

5. Useful Commands

Here are some common commands you’ll use in a React project:

• npm start: Starts the development server.
• npm run build: Builds the project for production.
• npm test: Runs tests in the project.

6. Tips for Beginners

• Always keep Node.js and npm updated to avoid compatibility issues.
• Use a code editor like Visual Studio Code for better development experience.
• Familiarize yourself with React DevTools to debug components effectively.