How to create simple react app Linux guru

Building Your First React App: A Step-by-Step Guide

Are you ready to explore the world of React and create your first web application? In this step-by-step tutorial, we will walk you through the process of building a simple React app with Create React App, a powerful tool that creates a new React project with a sensible default configuration. Let us get started.

Prerequisites:

Before we begin, ensure that you have Node.js and npm installed on your machine. Here is the link to install Node.JS on ubuntu.

Step 1: Install Create React App

Open your terminal and run the following command to install Create React App globally. This tool streamlines the setup of a new React project.

npx create-react-app my-react-app

Replace “my-react-app” with the desired name for your project.

Step 2: Navigate to Your Project

Change into the newly created project directory:

cd my-react-app

Step 3: Start the Development Server

Run the following command to launch the development server:

npm start

This command launches your app in development mode and opens your default web browser. Access it at http://localhost:3000/. When you change the source code of your app, the development server automatically reloads it.

Step 4: Explore Your React App

Open the src/App.js file in your preferred code editor. This file contains the primary component of your React app. You can make changes to this file or add new components in the src folder.

Step 5: Create a Simple Component

Let’s create a simple functional component. In the src folder, create a new file called SimpleComponent.js and add the following content:

// SimpleComponent.js
import React from 'react';

const SimpleComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple React component.</p>
    </div>
  );
};

export default SimpleComponent;

Step 6: Use the Component in App.js

Open src/App.js and import your SimpleComponent:

// src/App.js
import React from 'react';
import './App.css'; // You can delete this line
import SimpleComponent from './SimpleComponent';

function App() {
  return (
    <div className="App">
      <SimpleComponent />
    </div>
  );
}

export default App;

Step 7: Save and See Changes

After saving your files, you should see the changes in your running React app. The new component should say “Hello, React!” and contain a simple message.

Congratulations! You successfully built a simple React app and added a custom component to it. As you continue to develop your application, feel free to experiment with new React concepts and features.