LAB React Components

lab-react-components.md

LAB React Components

The main goal of this LAB is to practice creating and rendering React components.

Iteration 1: initial setup

For the initial setup, follow these steps:

• Open a terminal and navigate to your module2 directory.
• Run this command to create a React app with Vite: npm create vite@latest lab-react-components -- --template react
  • Note: you may be asked for confirmation (Ok to proceed? (y)). In that case, type "y" and hit enter.
  • 'Install with npm and start now?': select 'no'
• Go inside the new directory: cd lab-react-components
• Open with VS Code: code -r .
• Install dependencies: npm install
• Run the app: npm run dev
  • Note: if you're already running a Vite app on the default port, you can define a custom port with this command: npm run dev -- --port=3000

Next, we will also simplify the initial code in the App component:

• Open App.jsx
• Modify the code so that the App component just renders an H1.

It should look like this:

import './App.css'

function App() {

  return (
    <>
      <h1>LAB React Components</h1>
    </>
  )
}

export default App

Iteration 2: component Header

• Create a component Header (src/components/Header.jsx). For now, this component will just display a title (e.g., "This is the Header")
• Render Header component in App.jsx

Iteration 3: component Footer

• Create a component Header (src/components/Footer.jsx). This component will just display a title (e.g., "This is the Footer")
• Render the Footer component in App.jsx

Iteration 4: component RandomNumber

• Create a component RandomNumber (src/components/RandomNumber.jsx).
• This component should generate a random number between 1 and 100 and display the message Your random number is [number]
• In App.jsx, render the component RandomNumber 3 times.

Example:

Hint

In App.jsx, to render the component 3 times you can use this syntax:

import Header from './components/Header'
import Footer from './components/Footer'
import RandomNumber from './components/RandomNumber'

import './App.css'

function App() {
  return (
    <>
      <h1>LAB React Components</h1>

      <Header />

      <RandomNumber />
      <RandomNumber />
      <RandomNumber />

      <Footer />

    </>
  )
}

export default App;

Bonus: display the current date

Modify the Header component so that it displays the current date in a human-friendly format (example: Today is Monday, December 1st, 2025)

🚀