On day 1 of working on my Book Tracker App version 2.0:

I used this article to get my project set up with react and webpack. It teaches you how to get a simple React app running using babel and webpack. It covers setting up the .babelrc and .webpack.config.js files, which I found very helpful. I learned this stuff from a somewhat old (but good) course on Udemy, so I needed to learn how to update my dependencies.

Next I wanted to get something specific to my app showing to the screen. So I used react router to give me several different pages for my app. As it stands now there are three pages: a main page, a favorites page, and an add book page. Also I set up a 404 page, which links back to the main page (but more about that later). I learned that React router no longer makes use of Switch, so I had to look up the documentation and change that over to Routes. I set up my components and then created the Router using them. This is what my router file looks like.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import React from 'react'; 
import MainPage from "../src/components/MainPage";
import Header from "../src/components/Header";
import FavoritesPage from "../src/components/FavoritesPage";
import AddBookPage from "../src/components/AddBookPage";
import NotFoundPage from "../src/components/NotFoundPage";

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header />
            <Routes>
                <Route path="/" element={<MainPage/>} />
                <Route path="/add-book" element={<AddBookPage />} />
                <Route path="/favorites" element={<FavoritesPage />} />
                <Route path="*" element={<NotFoundPage />} />
            </Routes>
        </div>
    </BrowserRouter>
); 

export default AppRouter;

You see at the top of the file I import BrowserRouter, Routes, and Route from react-router-dom plus all the components I wrote myself that I'll be using. The routes all have to be wrapped in BrowserRouter, and then Routes replaces Switch as the way to tell react router to choose between the routes that are nested within. Each Route has a path (which is attached at the end of your websites url) and an element. The element is where you tell react router what Component to render when navigating to that path.

Then I set up a Header component that allows the user to switch between these various pages without having to manually type in the web address.

The next big step is to get redux working, as I plan to use it to manage my app's state. If I can ever understand it, I'll consider making an article discussing how to use it.