Setting up the React Chinook Project (with create-react-app)

NOTE:

We ended up using Vite for the final project (instead of create-react-app), so you can find the instructions for setting up the project with Vite here.

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:

npx create-react-app react-chinook

Create the basic components

Create a components folder inside the src folder.

Add Header.js to the components folder.

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

export default Header

Add NavBar.js to the components folder.

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

export default NavBar

Add Footer.js 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 index.js to look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import reportWebVitals from './reportWebVitals'; // WON'T WORK FOR FOR VITE

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

//reportWebVitals(); // WON'T WORK FOR VITE

Set up the Home Page

Create a pages folder inside the src folder.

Create MainLayout.js 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.js inside the pages folder:

import MainLayout from './MainLayout'

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

export default HomePage

Update App.js:

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.js:

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 this to index.js:

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.js 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.

Commit and Push

At this point you should commit your work:

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.