By the end of this guide, you will have a fully functional, multi-page React application running on your local machine. Mastering component-based architecture and client-side routing is essential for building modern, scalable web applications. You will learn to strip away the noise of default boilerplate and build a clean, modular structure from the ground up. This process includes creating reusable components and implementing efficient client-side routing to manage application state. While skepticism often surrounds new frontend frameworks, the practical utility of React lies in its predictable data flow and efficient rendering. This tutorial bypasses the high-level debates and focuses on the immediate, hands-on implementation of a professional development workflow. We will use Vite for rapid scaffolding and React Router for seamless navigation.
Prerequisites and Environment Setup
Successful React development requires NodeJS and npx[1] from recent Node versions to execute scripts and manage the build process. You must also have a package manager like npm or yarn installed to handle project dependencies.
Ensure your environment meets these specific requirements:
- Node.js 18+ installed
- npm or yarn package manager
- A terminal application
- A code editor, such as VS Code
Verify your installation by running the following commands in your terminal:
node -v
npm -v
If the commands return version numbers, your environment is ready. Node.js provides the runtime necessary for the build pipeline, while npm manages the external libraries your project will use.
While this tutorial does not require prior React experience, you should have a basic understanding of HTML, CSS, and JavaScript. This foundation ensures you can interpret the component structure and styling applied in later steps.
Step 1 — Initialize the Project Structure
Vite scaffolds your React project with a pre-configured directory and starter code. This tool creates a new folder containing an initialized git repository and starter code for your application. Using Vite provides significantly faster build times compared to older alternatives.
Run the following command in your terminal:
npm create vite@latest my-react-app -- --template react
This command generates the project files using the React template. Once the process finishes, navigate into your new project directory:
cd my-react-app
Next, install the necessary project dependencies. Run this command to download all required packages to your local environment:
npm install
This step is essential because the initial scaffold only contains configuration files, not the actual library code. After the installation completes, start the local development server:
npm run dev
You should see output similar to the following:
VITE v5.x.x ready in 300 ms ➜ Local: http://localhost:5173/
Open http://localhost:5173/ in your web browser. You should see the default Vite and React landing page.
If you see an error stating that port 5173 is already in use, Vite will automatically suggest an alternative port. Accept the suggestion by following the terminal prompts. This allows you to continue development even if another process is occupying the default port.
Step 2 — Clean the Default Boilerplate
Open the src/App.jsx file in your code editor.
Locate and delete the default Vite logo imports at the top of the file. You should also remove all existing JSX content located inside the App function.
Replace the entire content of the App function with the following code:
export default App; ```
This replacement confirms your build pipeline is functioning correctly with custom code. It provides a clean slate for the components you will build later.
Save the file. Refresh your browser window to verify the changes.
You should see a large heading that says "Hello, React!" on the page. If the page does not update, check your terminal to ensure the development server is still running.
Cleaning this boilerplate is a crucial step for beginners. It prevents you from inheriting complexity you did not create. By stripping the template down to a single element, you ensure that every subsequent addition to the project is intentional and documented by your own actions.
## Step 3 — Create Reusable Components
Organizing your code into components allows you to reuse specific UI elements across different parts of your application. This structure prevents code duplication and makes your project easier to maintain as it grows.
Step 1 — Create the components directory
Navigate to your `src` folder and create a new directory named `components`.
This folder will house all your individual UI pieces. Keeping them separate from your main logic prevents the `src` root from becoming cluttered.
Step 2 — Create the Header component
Inside the new `components` folder, create a file named `Header.jsx`.
Open this file in your editor. Add the following code to define a functional component:
```jsx
import React from 'react';
const Header = () => {
return (
<nav>
<a href="/">Home</a>
</nav>
);
};
export default Header;
This component returns a <nav> element containing a link to your root path. Using a functional approach is the standard for modern JavaScript development.
Step 3 — Register the component in App.jsx
Open your src/App.jsx file. Add an import statement at the top of the file to bring in your new component:
import Header from './components/Header';
Then, place the <Header /> tag inside the App function, above your existing <h1> element.
Your App.jsx should look like this:
import Header from './components/Header';
function App() {
return (
<div>
<Header />
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Verify the change by checking your browser at http://localhost:5173. You should see the navigation bar appearing directly above your heading.
Note: This setup enables component reusability. Because the Header is now an independent unit, you can render it on any new page you create without rewriting the navigation logic.
Step 4 — Install and Configure Routing
Client-side routing allows your application to navigate between different views without requesting a new HTML document from the server. This process relies on React Router v6 to manage URL changes within the browser.
First, install the necessary library by running the following command in your terminal:
npm install react-router-dom
This command adds the routing package to your project dependencies.
Next, open src/App.jsx in your editor. You must import the core routing components at the top of the file:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
This import provides the logic required to define and track different paths.
Now, wrap your existing application content inside the <BrowserRouter> component. This component acts as the provider for all routing state throughout your entire component tree.
Inside the <BrowserRouter> tags, define your path logic using the <Routes> and <Route> components. Use the following structure to set up a single home path:
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
This configuration tells the app to render the home content whenever the URL matches the root path.
Verify the setup by checking your browser. You should see your header and the home content load without any errors in the browser console.
If you see a "missing closing tag" error, check your JSX syntax. Ensure every component, such as <Header /> or <Route />, is properly closed with a forward slash and a bracket.
Step 5 — Build Multiple Pages and Navigation
Adding new pages allows your application to expand beyond a single view. This step connects your existing routing structure to new content and navigation links.
Step 1 — Create the About component
Navigate to your src/components folder. Create a new file named About.jsx.
Inside About.jsx, add the following code:
export default About; ```
This creates a simple functional component that displays a heading.
Step 2 — Register the new route
Open `src/App.jsx` in your editor. You must import the new component at the top of the file.
Add this import line:
```jsx import About from './components/About'; ```
Locate your `<Routes>` block. Add a new `<Route />` entry inside the existing `<Routes>` container:
```jsx <Route path="/about" element={<About />} /> ```
This tells <a href="https://frontend.turing.edu/lessons/module-3/react-router-v6.html">React Router v6</a> to render the About component when the URL path matches `/about`.
Step 3 — Update navigation links
Open `src/components/Header.jsx`. You need to use the `Link` component to enable client-side navigation without a full page reload.
First, add the import at the top of the file:
```jsx import { Link } from 'react-router-dom'; ```
Then, update your `<nav>` element to include a link to the new page:
```jsx <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> ```
Step 4 — Verify the multi-page setup
Save all files and check your browser. Click the "About" link in your navigation bar.
You should see the URL change to `localhost:5173/about` and the "About Us" heading appear. Clicking "Home" should return you to the original view.
You now have a fully functional multi-page React application with client-side routing.
You now have a fully functional multi-page React application with client-side routing. This foundation allows you to integrate complex state management or API interactions as your project grows. To add persistent data fetching, see our guide on integrating the Fetch API with React hooks.
