Today you’ll learn how to create multiple “pages” in React using useState and components, and how to collaborate with your partner using Git branches. You’ll set up the skeleton structure of your hackathon project.
By the end of this activity, you’ll be able to:
useStateReact is a single-page application (SPA) framework, but we can simulate multiple pages by:
useState to track which page to displayWorking with branches allows you to:
Here’s how to create a basic multi-page React app:
// App.jsx
import { useState } from 'react';
import Home from './pages/Home';
import DataList from './pages/DataList';
import About from './pages/About';
function App() {
// Track which page to show
const [currentPage, setCurrentPage] = useState('home');
// Three separate functions to change pages
function goToHomePage() {
setCurrentPage('home');
}
function goToDataListPage() {
setCurrentPage('list');
}
function goToAboutPage() {
setCurrentPage('about');
}
// Decide which page to show using if statements
let content = <Home />;
if (currentPage === 'home'){
content = <Home />
}
else if (currentPage === 'list') {
content = <DataList />;
} else if (currentPage === 'about') {
content = <About />;
}
return (
<>
<header>
<nav>
<button onClick={goToHomePage}>Home</button>
<button onClick={goToDataListPage}>Data List</button>
<button onClick={goToAboutPage}>About</button>
</nav>
</header>
<div className="app">
{content}
</div>
</>
);
}
export default App;
// pages/Home.jsx
function Home() {
return (
<div>
<h1>Home Page</h1>
<p>Welcome to our app!</p>
</div>
);
}
export default Home;
useState to track the current pageonClick calls the navigation functions directly# Check current branch
git branch
# Create a new branch
git branch feature-navigation
# Switch to the new branch
git switch feature-navigation
# Make changes, then stage and commit
git add .
git commit -m "Add basic navigation structure"
# Push branch to GitHub
git push -u origin feature-navigation
# Switch back to main
git switch main
# Pull latest changes
git pull origin main
Goals:
Steps:
Choose a driver (person who will type first)
npm create vite@latest hackathon-project -- --template react
cd hackathon-project
npm install
git init
git add .
git commit -m "Initial project setup"
git branch -M main
hackathon-project (or your app name)git remote add origin [your-repo-url]
git push -u origin main
git clone [repo-url]
cd hackathon-project
npm install
✅ Checkpoint: Both partners should have the project running locally with npm run dev
Goals:
Steps:
git branch add-navigation
git switch add-navigation
mkdir src/pages
src/pages/:
Home.jsxDataList.jsxAbout.jsxEach page should receive the three navigation functions as props and include buttons to navigate to the other pages.
Update App.jsx to import the pages and set up navigation with useState and if/else statements (refer to the demo code above).
Test the navigation - Click buttons to move between pages
git add .
git commit -m "Add basic navigation with three pages"
git push -u origin add-navigation
git switch main
git pull origin main
✅ Checkpoint: Navigation should work between all three pages for both partners
Goals:
Steps:
Switch computers/driver
git switch main
git pull origin main
git branch add-styling
git switch add-styling
App.css:
.page class to each page component wrapperTest all pages and styling
git add .
git commit -m "Add CSS styling and expand page content"
git push -u origin add-styling
Create PR, review, merge, and pull (same process as Activity 2)
git switch main
git pull origin main
✅ Checkpoint: All pages should have styling and expanded content
Discuss with your partner:
# Check status
git status
# See all branches
git branch
# Create a new branch
git branch branch-name
# Switch to a branch
git switch branch-name
# Stage all changes
git add .
# Commit changes
git commit -m "Description of changes"
# Push branch to GitHub
git push -u origin branch-name
# Pull latest changes
git pull origin main
# Delete local branch (after merging)
git branch -d branch-name
Solution: Pull first, then push
git pull origin main
git push
Solution:
<<<<<<<, =======, >>>>>>> markersSolution:
currentPage state value in React DevToolsonClick handlers call the functions (not arrow functions)Solution:
By the end of today, you should have:
In the next session, you’ll:
Great job today! You’ve built the foundation for your hackathon project and learned important collaboration skills with Git. Keep up the momentum! 🚀
This guide was developed with assistance from Anthropic’s Claude (Claude 3.5 Sonnet) to ensure clarity, accuracy, and consistency in the explanations and examples.