Setting up the React Chinook Project (with Vite)

Follow these steps as a team. When you are done, one of you will create the repository and link it to the Github classroom project.

Create the app:

npm create vite@latest

If you don't have vite installed, you'll be prompted to do so.

Enter a project name: react-chinook (I used react-chinook-vite)

Choose React (use the up/down arrows)

Choose JavaScript

Then you'll be prompted to run these commands:

cd react-chinook
npm install
npm run dev

Create the basic components

Create a components folder inside the src folder.

Add Header.jsx to the components folder.

const Header = () => {
  return (
    <header>Header</header>
  )
}

export default Header

Add NavBar.jsx to the components folder.

const NavBar = () => {
  return (
    <nav>NavBar</nav>
  )
}

export default NavBar

Add Footer.jsx to the components folder.

const Footer = () => {
  return (
    <footer>Footer</footer>
  )
}

export default Footer

Set up the Routing

Install the React Router DOM package

npm install react-router-dom

Update main.jsx to look like this:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

import { BrowserRouter } from 'react-router-dom'; // ADD THIS

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* Wrap the App inside a BrowserRouter component: */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

Set up the Home Page

Create a pages folder inside the src folder.

Create MainLayout.jsx inside the pages folder:

import Header from "../components/Header";
import NavBar from "../components/NavBar";
import Footer from "../components/Footer";

const MainLayout = ({children}) => {
  return (
    <>
      <Header />
      <NavBar />
      <main>
        {children}
      </main>
      <Footer />
    </>
  )
}

export default MainLayout

Create HomePage.jsx inside the pages folder:

import MainLayout from './MainLayout'

const HomePage = () => {
  return (
    <MainLayout>
      <h1>Home Page</h1>
    </MainLayout>
  )
}

export default HomePage

Update App.jsx:

import { Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
    </Routes>
  );
}

export default App;

Update NavBar.jsx:

import { NavLink } from "react-router-dom"

const NavBar = () => {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
    </nav>
  )
}

export default NavBar

Set up the JSON Server

I'm assuming that you already have the JSON Server package installed.

Put the chinook-data.json file into the project folder

Add this the scripts section of your package.json file (make sure to put a comma at the end of the last line):

"json-server":"npx json-server -w chinook-data.json -p 8080"

Now you can launch the JSON Server with this command:

npm run json-server

Note that if you have another instance of JSON Server running on port 8080, then you will have to terminate it.

Install Axios

npm install axios

Install Bootstrap

npm install bootstrap bootstrap-icons

Add these imports to main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

To verify that bootstrap and the icons are working, update Header.jsx to look like this:

const Header = () => {
  return (
    <header>
      <div className="container-fluid bg-dark text-white">
        <i className="bi bi-database-check" style={{color:"white"}}></i>
        Header
      </div>
    </header>
  )
}

export default Header

Remember that you must use the 'className' attribute instead of 'class'

Note that I wanted the icon to show up as white, so I set the style attribute to an object. This is how you have to use the style attribute in JSX (I'm not sure if we've run into this yet!).

You'll have to use a different icon, and bootstrap your app in your own way.

Finally, you may want to remove all the CSS code from index.css

Set up the Git repository

Create a repo and commit your code by running these commands:

git init
git add .
git commit -m "Initial project setup complete"

Now click the source control icon (on the left side of VSCode) to publish the repository.

You should also create a branch so that you have a snapshot of the project at this time:

git branch initial-setup
git push origin initial-setup

Then share the repository with your team members.

Each team member can then clone the repository.

Each team member should create their own branch and make their commits to that branch.

You should only merge into the master branch after the commits to your branch have been peer reviewed.