Skip to content
Share
Explore

React Interactive Web Application Lab

⁠
⁠
⁠

Overview

In this lab, you will create a React application that demonstrates a comprehensive understanding of React principles including:
- component architecture
state management
user interaction
CSS styling
component navigation.
The mechanisms for Data passing between components
Your application will consist of a central feature or theme of your choosing.

Prerequisites:

Basic understanding of HTML, CSS, and JavaScript.
Node.js and npm (Node Package Manager) installed on your system.
Familiarity with the command line interface.

Objective:

Create an interactive React web application that includes:
Five distinct components that serve different purposes in the app.
CSS styling to make the application visually appealing.
Data passing between components using props and state management.
Fields for data entry and display, including at least one form with validation.
User interaction through onClick event handlers that trigger state changes.
Component navigation using either conditional rendering or React Router.

Setup

Initialize a new React application using Create React App:
In the command line terminal:

npx create-react-app react-interactive-web-lab
cd react-interactive-web-lab
npm start

Plan your application's feature/theme and determine the components required.

Component Architecture

1. Layout Component

Create a Layout component that serves as the main container for your application.
It should include the following:
A header that displays the application title.
A navigation bar or menu to move between components (if applicable).
We will be using the dom routers to navigate between components:
https://reactrouter.com/en/main/start/tutorial
⁠
⁠
megaphone

Define a Layout component with a header and navigation bar.

This example assumes you're using functional components and React Router for navigation. If you haven't installed React Router yet, you can do so by running npm install react-router-dom.

// First, you need to import necessary hooks and components from 'react-router-dom'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

// Import your custom components
import HomeComponent from './HomeComponent';
import InputFormComponent from './InputFormComponent';
import DisplayComponent from './DisplayComponent';
import AboutComponent from './AboutComponent';

// This is your Layout component
function Layout() {
return (
<Router>
<div className="layout">
<header>
<h1>My React App</h1>
</header>
<nav>
<ul>
{/* These links should route to your different components */}
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/input">Input Form</Link>
</li>
<li>
<Link to="/display">Display</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<AboutComponent />
</Route>
<Route path="/display">
<DisplayComponent />
</Route>
<Route path="/input">
<InputFormComponent />
</Route>
<Route path="/">
<HomeComponent />
</Route>
</Switch>
</div>
</Router>
);
}

export default Layout;

For this code to work properly, you must have the four components
(HomeComponent, InputFormComponent, DisplayComponent, and AboutComponent) defined and exported in their respective files.
Here's a simple CSS to get you started with the layout styling:
cssCopy code
.layout {
text-align: center;
}

header {
background-color: #333;
color: white;
padding: 10px 0;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

nav ul li a {
text-decoration: none;
color: #333;
}

/* Apply this class to the active link */
.active {
color: #555;
font-weight: bold;
}

In your CSS, make sure to design your active link appropriately, perhaps with a different color or font weight to indicate which page the user is currently viewing.
Remember, this is a functional, basic layout component. You would likely want to enhance the CSS with your own design system or use a framework like Tailwind CSS or Bootstrap to make it more aesthetically pleasing.
megaphone

The CSS provided should be placed in a separate file, commonly named App.css or styles.css, which then needs to be imported into your main App.js file or the specific component file where you want to apply the styles.

Here's how you can organize the CSS:
Create a new file in your project's src directory and name it App.css.
Copy the CSS provided into the App.css file.
Import the App.css file into your App.js file to apply the styles to your application.
Here's what the import statement in App.js would look like:
jsxCopy code
import './App.css';

Your App.js file's beginning would now look like this:
jsxCopy code
import React, { useState } from 'react';
import './App.css'; // This imports the CSS you just saved
import Home from './Home'; // Assume Home.js exists
// ... rest of your imports

This ensures that the CSS styles are loaded and applied when your React application renders. Remember that the actual names of the files can vary based on your project's setup and your personal naming conventions. The important part is to maintain consistency and to import the CSS file into your JavaScript file so that the styles are applied.

2. Home Component

Develop a Home component that serves as the landing page of your application, containing:
A brief introduction to what the app does.
A visually appealing design using CSS.
megaphone

Below is an example of how you could structure the HomeComponent in React, including some inline CSS for styling.

You would typically keep the CSS in a separate file and import it, but for simplicity, I'll include it within the component.

Note that for a real-world application, you'd likely use a CSS framework or write more complex styles.


import React from 'react';

function HomeComponent() {
// Inline styles
const styles = {
container: {
padding: '50px',
textAlign: 'center',
},
header: {
fontSize: '2em',
color: '#333',
},
paragraph: {
fontSize: '1em',
color: '#666',
},
highlight: {
color: '#0056b3',
}
};

return (
<div style={styles.container}>
<h1 style={styles.header}>Welcome to the Space Exploration App</h1>
<p style={styles.paragraph}>
Explore the Galaxy in this Space Exploration Simulation.
</p>
<p style={{...styles.paragraph, ...styles.highlight}}>
Navigate through the simulation drills of Star Fleet Academy's Entrance Qualification Test for new Space Cadets
</p>
</div>
);
}

export default HomeComponent;

In a real application, instead of inline styles, you would probably use a separate CSS file like this:
cssCopy code
/* HomeComponent.css */
.home-container {
padding: 50px;
text-align: center;
}

.home-header {
font-size: 2em;
color: #333;
}

.home-paragraph {
font-size: 1em;
color: #666;
}

.home-highlight {
color: #0056b3;
}

Then, you would import this CSS file in your component:
jsxCopy code
import React from 'react';
import './HomeComponent.css';

function HomeComponent() {
return (
<div className="home-container">
<h1 className="home-header">Welcome to My React App</h1>
<p className="home-paragraph">
This is a simple React application that demonstrates the core concepts of React.js, such as components, state, and props.
Navigate through the app to learn more about its features. Enjoy exploring!
</p>
<p className="home-paragraph home-highlight">
Start by navigating to the Input Form to enter some data!
</p>
</div>
);
}

export default HomeComponent;

To make the home component visually appealing, consider using modern CSS techniques like Flexbox or Grid for layout, and transitions or animations for dynamic effects. You could also include images, icons, or even a carousel for a more interactive experience.

3. Input Form Component

Implement an InputForm component that allows users to submit data, with:
Input fields for collecting data.
Form validation to ensure data integrity.
A submit button with an onClick event handler to process and pass data to other components.
megaphone

InputForm component that includes basic validation and a submit handler. The input data is stored in the component's state, and when the form is submitted, it could be passed upwards via a callback function provided by a parent component, or managed by a state management library like Redux or Context API.

jsxCopy code
import React, { useState } from 'react';

function InputForm({ onSubmit }) {
const [inputData, setInputData] = useState({
name: '',
age: ''
});
const [errors, setErrors] = useState({});

// Validates the form and returns a boolean indicating if the data is valid
const validateForm = () => {
let valid = true;
let errors = {};

if (!inputData.name) {
errors.name = 'Name is required';
valid = false;
}

if (!inputData.age || isNaN(inputData.age)) {
errors.age = 'Please enter a valid age';
valid = false;
}

setErrors(errors);
return valid;
};

// Handles form submission
const handleSubmit = (event) => {
event.preventDefault();
if (validateForm()) {
onSubmit(inputData); // This would be a function passed down from the parent component
setInputData({ name: '', age: '' }); // Reset form data
setErrors({}); // Reset errors
}
};

// Updates the inputData state as the user types in the inputs
const handleChange = (event) => {
const { name, value } = event.target;
setInputData({
...inputData,
[name]: value
});
};
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.