React Setup Guide

This is not a complete tutorial but is a guide to get you started with React.

Prerequisites

• You have Node.js  Version 20.19 or greater installed on your computer
• A Code Editor
• GitHub Account
• GitHub Desktop

alexanderp@Alexander-Macbook ~> node --version
# v24.10.0
 
alexanderp@Alexander-Macbook ~> node -v
# v24.10.0

Getting Started

Once you have all the requirements, open your terminal and navigate to the folder you save your work in.

To navigate using the Terminal use the cd command followed by the name of the folder.

alexanderp@Alexander-Macbook ~/randomFolder> cd
alexanderp@Alexander-Macbook ~>

alexanderp@Alexander-Macbook ~> cd Documents/
alexanderp@Alexander-Macbook ~> cd GitHub/
alexanderp@Alexander-Macbook ~/Documents/Github>

Navigating to your GitHub Folder

If you have done everything correctly you should see your GitHub folder on the line of the terminal. You can also verify this is the correct directory by using the ls command and seeing if you see your USERNAME.github.io folder

alexanderp@Alexander-Macbook ~/Documents/GitHub> ls
alexandernc0043.github.io/
alexanderp@Alexander-Macbook ~/Documents/GitHub>

Contents of the GitHub Folder

Creating your React Project

If you are in the correct place you now need to run the command to create your React Project. For this guide we will be using the vite template. Vite is a build tool that helps us build our projects. Read more about vite here .

1. Inside the Terminal run the command npm create vite@latest

   • npm stands for Node Package Manager
   • create tells Node that we want to create a project
   • vite is the name of the package we are using

2. Then you should see prompts on your screen asking you for more project information.

3. For Project name type courseid-react (where course id is your course id)

4. For framework select React, you will use the arrow keys to navigate through the menu, and use Enter to select.

5. For the variant select JavaScript

6. For rolldown-vite (Experimental) select No (Default)

7. For install with npm and start now hit Yes (Default)

8. If you did everything correctly you should see your choices here and see this screen when your app has started.

alexanderp@Alexander-Macbook ~/Documents/GitHub> npm create vite@latest
 
> npx
> "create-vite"
 
│
◇  Project name:
│  itis3135-react
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│

VITE v7.2.0  ready in 363 ms
 
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Vite Started

9. You should see the opening project page when you visit the site.

Creating Components

From React’s Website a Component is “a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page” React.dev 

1. To create a component we will need to create a new file, with the same name as our component.

2. Once you create the file, create a function with the same name as the file, using the following code

• Since we are creating a component and want to use this outside the file we will need to use a few more modifier keywords on the function so it is available to the rest of the project.

  • export allows the function to be used outside the file.

  • default just makes it the default export of the file.

export default function Header() {
  ...
}

3. We need to return something we want the component to render. Since this component is creating a Header it should return the <header></header> element. Remember that an element is the combination of the opening and closing tags and everything in between.

export default function Header() {
    return <header></header>;
}

4. Add code to the header so you see content on the page when you use the component

import { Link } from 'react-router';
export default function Header() {
    return (
        <header>
            <h1>Alexander Prechtel's Advanced Pegasus | ITIS 3135</h1>
            <nav>
                <ul>
                    <li>
                        <Link href="/">Home</Link>
                    </li>
                </ul>
            </nav>
        </header>
    );
}

5. Add the component to the app: Go to the App.jsx file inside the src folder. You will see the code that displays the two images and other content on the page from before.

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
 
function App() {
    const [count, setCount] = useState(0);
 
    return (
        <>
            <div>
                <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />
                </a>
                <a href="https://react.dev" target="_blank">
                    <img
                        src={reactLogo}
                        className="logo react"
                        alt="React logo"
                    />
                </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                </button>
                <p>
                    Edit <code>src/App.jsx</code> and save to test HMR
                </p>
            </div>
            <p className="read-the-docs">
                Click on the Vite and React logos to learn more
            </p>
        </>
    );
}
 
export default App;

6. To add the component we will need to import it first before we can use it. Type import Header from ‘./Header’

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import Header from './Header'
...

7. Inside the return statement of our App function we can add our <Header/> component.
   • Since we are not putting anything inside Header we can turn it into a void/self closing element but using the opening and closing tags is also valid. The boxes below show both options. Pick one.

...
return (
  <>
    <Header></Header>
    ...

...
return (
  <>
    <Header/>
    ...

Repeat this whole process for the footer and confirm that it appears.

Turning Our App from an SPA to an MPA

SPA stands for Single Page Application and MPA stands for Multi Page Application.

1. First we need to install the React Router package into our project. Going back to the terminal we need to stop our application by hitting CTRL + C and navigating into our project folder

^C
alexanderp@Alexander-Macbook ~/Documents/GitHub> cd itis3135-react
alexanderp@Alexander-Macbook ~/Documents/GitHub/itis3135-react>

2. Inside our project folder we will install the React Router package using NPM.

alexanderp@Alexander-Macbook ~/Documents/GitHub/itis3135-react> npm install react-router
added 50 packages, and audited 203 packages in 2s
 
32 packages are looking for funding
    run `npm fund` for details
 
found 0 vulnerabilities
alexanderp@Alexander-Macbook ~/Documents/GitHub/itis3135-react>

3. Once it’s installed we can start adding it to our project. Opening main.jsx inside the src folder we can add the components we need.

   • Components we need are:
     • BrowserRouter
     • Routes
     • Route
   • To import the components we will use the import statement at the top of the file using import { BrowserRouter, Routes, Route } from 'react-router'
   • Since we are importing multiple items we need to surround them with curly braces.

4. In between the Strict Mode component we will see <App/> we need to delete that and replace it with this.

...
createRoot(document.getElementById("root")).render(
    <StrictMode>
        <BrowserRouter>
    
            <Routes></Routes>
        </BrowserRouter>
    </StrictMode>,
);

5. To add a route will need to use the Route component.

   • Path tells the react router which URL path we want to use. In this case / signifies the root of the website.
   • Element tells the react router which component we want to render which we will use the App component.
   Warning

   Make sure <App /> is surrounded by curly braces or else it will cause problems, you can also surround path=’/’ with curly braces but not doing so won’t cause issues.

...
<Routes>
    <Route path="/" element={<App />}></Route>
</Routes>
...

6. Restart the app to verify that you still see our homepage. To do that we can use the script dev which will restart our application. To do so go to Terminal and type npm run dev.

alexanderp@Alexander-Macbook ~/Documents/GitHub/itis3135-react> npm run dev

7. To create another page. You will create a new component that will act as our second page. Here I am creating a new component called Introduction in a file named Introduction.jsx and I’m reusing the Header component we created earlier and adding some content on the page.
   • If you have a good eye you will see I’m using these empty elements <></>. In React these are called Fragments and the reason I’m using them is because in React you can only return one parent element so if I were to delete them and return my header, main, and footer I would have an error.

import Header from "./Header";
import Footer from "./Footer";
export default function Introduction() {
    return (
        <>
            <Header />
            <main>
                <h2>Introduction</h2>
                <p>qui mollit ut magna nisi</p>
            </main>
            <Footer />
        </>
    );
}

8. To add this new page as a route go back to main.jsx and add it as a route.

...
<Routes>
  <Route path='/' element={<App />}></Route>
  <Route path='/introduction' element={<Introduction />}></Route>
</Routes>
...

9. Go back to your application preview in your web browser and check the new route you created to verify it works.

Creating a Layout

You may ask if there is any way we can reduce the amount of code we are using for each page since we are reusing it on every page, and yes you can! We can create a Layout component which will have some code that we will use on every page that uses that template.

1. Create a new file and name it Layout.jsx and create the starter code for the component.

export default function Layout(){
  return ();
}

2. Inside it add your <Header />, <Footer />, components and use the main element.

import Header from './Header'
import Footer from './Footer'
 
export default function Layout(){
  return (
    <>
      <Header/>
      <main></main>
      <Footer/>
    </>
  );
}

This by itself won’t work yet and we need to do two more things to get it to work. First thing is we need to add the <Outlet/> component from React Router. What <Outlet/> lets us do is pass components into our Layout, so add an <Outlet/> component inside your main element.

import Header from './Header'
import Footer from './Footer'
import {Outlet} from 'react-router'
 
export default function Layout(){
  return (
    <>
      <Header/>
      <main>
        <Outlet/>
      </main>
      <Footer/>
    </>
  );
}

Go Check that you see your <Header/> and <Footer/> components and page content inside the main element.

Changing the title

Theres a few different ways to do this and I encourage you to explore the various options but some of the more simpler options are these:

1. Simply Adding the <title></title> element inside your component.

   • This will override whatever title you have on your with the content inside the element.

2. Using document.title inside the function.

   • This allows you to append to the end of your title or override it.

Publishing to GitHub and Vercel

1. If you are runnning your application in Terminal stop the application by hitting CTRL + C

2. If you are not inside the folder where your code is navigate to it now.

3. Run git init and you will see a message saying it created an empty git repository

   • If you do not have git installed on your machine install it from their website .

4. Open GitHub Desktop and click the Add button, and then click Add Existing Repository

5. Click the choose button and navigate to the folder where you have saved your code.

6. Then you should see your changes inside GitHub Desktop. Write a commit message, commit changes, and then click publish repository.

7. Uncheck keep this code private.

8. Give the repository a name (courseid-react)

9. Go back to Terminal and install the Vercel CLI

npm install -g vercel

10. Run the vercel command
    • It will ask you to sign into a vercel account which you can do so with your GitHub Account.