Milind Daraniya

Hello, aspiring React developers! In this step-by-step guide, we'll walk you through creating your first React app from scratch. We'll start with a simple example that includes 2-3 components to help you understand the basics of React. Let's dive in and build your first React app!

Before proceeding, ensure you have Node.js and npm (Node Package Manager) installed on your machine.

Step 1: Set Up a New React Project 
Open your terminal and run the following command to create a new React project using Create React App (CRA):

npx create-react-app my-first-app

Replace my-first-app with the desired name for your project.

Step 2: Navigate to the Project Directory 
Once the project is created, navigate to the project directory using:

cd my-first-app

Step 3: Run the Development Server 
Start the development server by running:

npm start

This will open the app in your default web browser at http://localhost:3000.

Step 4: Create Your First Component 
Now, let's create your first React component. Replace the content of the src/App.js file with the following code:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My First React App</h1>
    </header>
  );
};

const Content = () => {
  return (
    <div>
      <p>Welcome to the world of React! </p>
      <p>This is your first React component.</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
};

export default App;

Step 5: Test Your First App 
Save the changes made in App.js. Your development server will automatically reload the page with the updated content.

You should now see the header "My First React App" and the content "Welcome to the world of React! This is your first React component." displayed on the page.

Step 6: Add Another Component (Optional) 
If you want to add one more component, you can create a new file named Footer.js in the src directory with the following code:

import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>© 2023 My First React App. All rights reserved.</p>
    </footer>
  );
};

export default Footer;

Then, import and use the Footer component in App.js as follows:

import React from 'react';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
};

export default App;

Step 7: Test the Updated App 
After adding the Footer component, save the changes made in App.js. The development server will automatically reload, and you'll now see the footer with the copyright information at the bottom of the page.

Congratulations! 🎉 You've successfully created your first React app with 2-3 components.

With this knowledge, you can now start building more complex and interactive applications using React. Keep exploring and learning more about React's powerful features and ecosystem!

Happy coding, and enjoy your journey in the world of React!