React Class 2

Run First Page in React

In this guide, we'll walk through running your first page in a React application.

Step 1: Create a React Component

Start by creating a new React component. You can create a file called FirstPage.js in the src folder of your React project.

// FirstPage.js

import React from 'react';

function FirstPage() {
    return (
        <div>
            <h1>Welcome to Your First Page</h1>
            <p>This is the first page of your React application.</p>
        </div>
    );
}

export default FirstPage;

Step 2: Import and Render the Component

Next, import and render the FirstPage component in your App.js file or any other main component of your React application.

// App.js

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

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

export default App;

Step 3: Run Your React Application

Now, run your React application by executing the following command in your terminal:

npm start

This command will start the development server, and you should be able to view your first page in your browser at http://localhost:3000.

That's it! You've successfully run your first page in a React application.