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.

React Class 1

Get Started with React and Vite using npm

In this guide, we'll walk through setting up a React project with Vite using npm.

Step 1: Create a new React project

Open your terminal or command prompt and run the following command to create a new React project:

npm create vite@latest

Step 2: Navigate into your project directory

Navigate into your project directory by running:

cd my-react-app

Step 3: Install Vite as a development dependency

Install Vite in your project as a development dependency:

npm run dev

That's it! You've successfully set up a React project with Vite using npm.