React Fundamentals Course

Lesson 1 Lab: Company Landing Page

Lab Overview

In this hands-on lab, you will create a modern company landing page using React. This lab introduces you to the fundamental concepts of React development including JSX syntax, component structure, and modern development workflow. By the end of this lab, you will have built a complete responsive landing page with multiple reusable components.

Total Estimated Time: 30 minutes

Exercise 1: Project Setup and Environment Verification

Estimated Time: 5 minutes

In this exercise, you will create a new React project using Create React App and verify that your development environment is properly configured. You'll also explore the initial project structure to understand how React applications are organized.

Step 1.1: Create a New React Project

Open VS Code on your Windows virtual machine
Open the integrated terminal by pressing `Ctrl + `` (backtick) or go to Terminal > New Terminal
Navigate to your desired project directory (e.g., Desktop or Documents):
```
cd Desktop
```
Create a new React application called "company-landing":
```
npx create-react-app company-landing
```
This command downloads and sets up a complete React development environment with all necessary dependencies, build tools, and configuration files.
Navigate into the project directory:
```
cd company-landing
```

Step 1.2: Explore the Project Structure

In VS Code, open the project folder by clicking File > Open Folder and selecting the company-landing folder
Examine the project structure in the Explorer panel:
- public/ - Contains static files including index.html (the single HTML file)
- src/ - Contains all React components and JavaScript files
- package.json - Lists project dependencies and scripts
- README.md - Project documentation
Open src/App.js to see the default React component structure

Step 1.3: Start the Development Server

In the VS Code terminal, start the development server:
```
npm start
```
This command starts a local development server with hot reloading, meaning changes you make will automatically update in the browser.
Your default browser should automatically open to http://localhost:3000
You should see the default React application with a spinning React logo

Exercise 1 Summary: You have successfully created a React project, explored its structure, and verified the development environment is working. The development server is now running and ready for development.

Exercise 2: Create the Header Component

Estimated Time: 8 minutes

In this exercise, you will create your first custom React component - a website header with navigation. You'll learn about JSX syntax, component creation, and basic styling with CSS modules.

Step 2.1: Create the Header Component File

In the src folder, create a new folder called components
Inside the components folder, create a new file called Header.js

Add the following code to Header.js:

import React from 'react';
import './Header.css';

function Header() {
  return (
    <header className="header">
      <div className="container">
        <div className="logo">
          <h1>TechCorp</h1>
        </div>
        <nav className="navigation">
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

export default Header;

This creates a functional component using JSX (JavaScript XML), which allows you to write HTML-like syntax within JavaScript.

Step 2.2: Create Header Styles

In the same components folder, create a file called Header.css

Add the following CSS:

.header {
  background-color: #2c3e50;
  color: white;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.navigation a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navigation a:hover {
  color: #3498db;
}

Step 2.3: Import and Use the Header Component

Open src/App.js

Replace the entire content with:

import React from 'react';
import Header from './components/Header';
import './App.css';

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

export default App;

This demonstrates how to import and use custom components in React.

Save all files and check your browser - you should now see a professional-looking header

Exercise 2 Summary: You have created your first custom React component with JSX syntax, learned how to structure components in separate files, implemented CSS styling, and successfully imported the component into your main App component.

Exercise 3: Create the Hero Section Component

Estimated Time: 8 minutes

In this exercise, you will create a hero section component that showcases compelling content and call-to-action buttons. You'll learn about component composition and creating visually appealing layouts with CSS flexbox.

Step 3.1: Create the Hero Component

In the components folder, create a new file called Hero.js

Add the following code:

import React from 'react';
import './Hero.css';

function Hero() {
  return (
    <section className="hero" id="home">
      <div className="container">
        <div className="hero-content">
          <h1>Innovating Tomorrow's Technology Today</h1>
          <p>
            We deliver cutting-edge software solutions that transform businesses 
            and empower teams to achieve extraordinary results. Join thousands of 
            companies that trust TechCorp for their digital transformation.
          </p>
          <div className="hero-buttons">
            <button className="btn btn-primary">Get Started</button>
            <button className="btn btn-secondary">Learn More</button>
          </div>
        </div>
        <div className="hero-image">
          <div className="placeholder-image">
            <span>🚀</span>
            <p>Innovation</p>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Hero;

Step 3.2: Create Hero Styles

Create a file called Hero.css in the components folder

Add the following CSS:

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4rem 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.hero .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-secondary {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-image {
  background-color: rgba(255,255,255,0.1);
  border-radius: 15px;
  padding: 3rem;
  text-align: center;
  backdrop-filter: blur(10px);
}

.placeholder-image span {
  font-size: 4rem;
  display: block;
  margin-bottom: 1rem;
}

.placeholder-image p {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 600;
}

@media (max-width: 768px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-content h1 {
    font-size: 2.5rem;
  }
}

Step 3.3: Add Hero to App Component

Open src/App.js

Import the Hero component and add it below the Header:

import React from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import './App.css';

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

export default App;

Save and check your browser to see the new hero section

Exercise 3 Summary: You have created a visually appealing hero section with gradient backgrounds, responsive design, and interactive buttons. You learned about CSS Grid, media queries for responsiveness, and how multiple components work together in a React application.

Exercise 4: Create Services and Footer Components

Estimated Time: 9 minutes

In this exercise, you will create the final two components to complete your landing page: a services section showcasing company offerings and a footer with contact information. You'll practice component reusability and learn about mapping over data arrays.

Step 4.1: Create the Services Component

Create a file called Services.js in the components folder

Add the following code:

import React from 'react';
import './Services.css';

function Services() {
  const services = [
    {
      id: 1,
      icon: '💻',
      title: 'Web Development',
      description: 'Custom web applications built with modern frameworks and best practices.'
    },
    {
      id: 2,
      icon: '📱',
      title: 'Mobile Apps',
      description: 'Native and cross-platform mobile applications for iOS and Android.'
    },
    {
      id: 3,
      icon: '☁️',
      title: 'Cloud Solutions',
      description: 'Scalable cloud infrastructure and deployment solutions for your business.'
    }
  ];

  return (
    <section className="services" id="services">
      <div className="container">
        <h2>Our Services</h2>
        <p className="services-intro">
          We provide comprehensive technology solutions to help your business thrive in the digital age.
        </p>
        <div className="services-grid">
          {services.map(service => (
            <div key={service.id} className="service-card">
              <div className="service-icon">{service.icon}</div>
              <h3>{service.title}</h3>
              <p>{service.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Services;

This demonstrates how to use the map() function to render multiple similar components from an array of data.

Step 4.2: Create Services Styles

Create Services.css in the components folder:

.services {
  padding: 5rem 0;
  background-color: #f8f9fa;
}

.services .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.services h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.services-intro {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background: white;
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.service-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.service-card p {
  color: #666;
  line-height: 1.6;
}

Step 4.3: Create the Footer Component

Create Footer.js in the components folder:

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

function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <div className="footer-content">
          <div className="footer-section">
            <h3>TechCorp</h3>
            <p>Innovating tomorrow's technology today. Building the future, one solution at a time.</p>
          </div>
          <div className="footer-section">
            <h4>Contact Info</h4>
            <p>📧 hello@techcorp.com</p>
            <p>📞 (555) 123-4567</p>
            <p>📍 123 Tech Street, Innovation City</p>
          </div>
          <div className="footer-section">
            <h4>Follow Us</h4>
            <div className="social-links">
              <a href="#" aria-label="LinkedIn">💼</a>
              <a href="#" aria-label="Twitter">🐦</a>
              <a href="#" aria-label="GitHub">💻</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>&copy; 2024 TechCorp. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

export default Footer;

Step 4.4: Create Footer Styles

Create Footer.css:

.footer {
  background-color: #2c3e50;
  color: white;
  padding: 3rem 0 1rem;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 1rem;
  color: #3498db;
}

.footer-section p {
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.social-links a:hover {
  transform: scale(1.2);
}

.footer-bottom {
  border-top: 1px solid #34495e;
  padding-top: 1rem;
  text-align: center;
}

Step 4.5: Complete the App Component

Open src/App.js and update it to include all components:

import React from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import Services from './components/Services';
import Footer from './components/Footer';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header />
      <Hero />
      <Services />
      <Footer />
    </div>
  );
}

export default App;

Update App.css to remove default styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.App {
  min-height: 100vh;
}

Save all files and view your complete landing page in the browser

Exercise 4 Summary: You have successfully created a complete company landing page with multiple React components. You learned about data mapping, component composition, responsive design with CSS Grid, and how all components work together to create a cohesive user experience.

Lab Summary

Congratulations! You have successfully completed the Company Landing Page lab. In this lab, you:

✅ Set up a React development environment and learned project structure
✅ Created multiple functional React components using modern JSX syntax
✅ Implemented component-based architecture with separate, reusable components
✅ Applied modern CSS techniques including Flexbox, Grid, and responsive design
✅ Used array mapping to render dynamic content
✅ Structured a complete React application with proper file organization

Key React Concepts Learned:

JSX Syntax: Writing HTML-like code in JavaScript
Functional Components: Creating components as JavaScript functions
Component Import/Export: Organizing and reusing components across files
CSS Modules: Styling components with scoped CSS files
Component Composition: Building complex UIs from simple components

Next Steps:

Your landing page is now complete and ready for further enhancement. In the next lesson, you'll learn about props and how to make components dynamic and reusable by passing data between them.

Time Completed: ~30 minutes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Fundamentals Course

Lesson 1 Lab: Company Landing Page

Lab Overview

Exercise 1: Project Setup and Environment Verification

Step 1.1: Create a New React Project

Step 1.2: Explore the Project Structure

Step 1.3: Start the Development Server

Exercise 2: Create the Header Component

Step 2.1: Create the Header Component File

Step 2.2: Create Header Styles

Step 2.3: Import and Use the Header Component

Exercise 3: Create the Hero Section Component

Step 3.1: Create the Hero Component

Step 3.2: Create Hero Styles

Step 3.3: Add Hero to App Component

Exercise 4: Create Services and Footer Components

Step 4.1: Create the Services Component

Step 4.2: Create Services Styles

Step 4.3: Create the Footer Component

Step 4.4: Create Footer Styles

Step 4.5: Complete the App Component

Lab Summary

Key React Concepts Learned:

Next Steps:

FilesExpand file tree

lesson-1-exercise-x.md

Latest commit

History

lesson-1-exercise-x.md

File metadata and controls

React Fundamentals Course

Lesson 1 Lab: Company Landing Page

Lab Overview

Exercise 1: Project Setup and Environment Verification

Step 1.1: Create a New React Project

Step 1.2: Explore the Project Structure

Step 1.3: Start the Development Server

Exercise 2: Create the Header Component

Step 2.1: Create the Header Component File

Step 2.2: Create Header Styles

Step 2.3: Import and Use the Header Component

Exercise 3: Create the Hero Section Component

Step 3.1: Create the Hero Component

Step 3.2: Create Hero Styles

Step 3.3: Add Hero to App Component

Exercise 4: Create Services and Footer Components

Step 4.1: Create the Services Component

Step 4.2: Create Services Styles

Step 4.3: Create the Footer Component

Step 4.4: Create Footer Styles

Step 4.5: Complete the App Component

Lab Summary

Key React Concepts Learned:

Next Steps: