React Router DOM Setup

Setup

Open your Terminal application and navigate to your ~/code/ga/lectures directory:

cd ~/code/ga/lectures

Create a new Vite project for your React app:

npm create vite@latest

You’ll be prompted to choose a project name. Let’s name it react-router-dom.

Navigate to your new project directory and install the necessary dependencies:

cd react-router-dom
npm i

Open the project’s folder in your code editor:

code .

Configuring ESLint

Before we begin, we need to adjust the ESLint configuration. Add the indicated rules to the rules object in your eslint.config.js file:

    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/prop-types': 'off', // add this line
      'react/no-unescaped-entities': 'off', // add this line
    },

The first addition prevents warnings if you don’t declare types for your props (which we’re not), and the second prevents warnings if you use contractions within JSX.

Clear App.jsx

Open the App.jsx file in the src directory and replace the contents of it with the following:

// src/App.jsx

const App = () => {
  return <h1>Hello world!</h1>;
};

export default App;

Running the development server

To start the development server and view our app in the browser, we’ll use the following command:

npm run dev

You should see that Vite is available on port number 5173:

localhost:5173

GitHub setup

To add this project to GitHub, initialize a Git repository:

git init
git add .
git commit -m "init commit"

Make a new repository on GitHub named react-router-dom.

Link your local project to your remote GitHub repo:

git remote add origin https://github.com/<github-username>/react-router-dom.git
git push origin main

🚨 Do not copy the above command. It will not work. Your GitHub username will replace <github-username> (including the < and >) in the URL above.

Getting started

Since this lesson is going to involve switching between components, let’s keep things organized by creating a components directory in the src directory:

mkdir src/components

Create a new component called PokemonList:

mkdir src/components/PokemonList
touch src/components/PokemonList/PokemonList.jsx

Add the following starter code to src/components/PokemonList/PokemonList.jsx:

// src/components/PokemonList/PokemonList.jsx

const PokemonList = (props) => {
  return (
    <>
      <h2>Pokemon</h2>
      <ul>
        {props.pokemon.map((currentPokemon) => (
          <li key={currentPokemon.name}>{currentPokemon.name}</li>
        ))}
      </ul>
    </>
  );
};

export default PokemonList;

Open src/App.jsx and replace its contents with the following:

// src/App.jsx

import { useState } from 'react';
import PokemonList from './components/PokemonList/PokemonList';

const initialState = [
  { _id: 1, name: 'bulbasaur', weight: 69, height: 7 },
  { _id: 2, name: 'ivysaur', weight: 130, height: 10 },
  { _id: 3, name: 'venusaur', weight: 1000, height: 20 },
  { _id: 4, name: 'charmander', weight: 85, height: 6 },
  { _id: 5, name: 'charmeleon', weight: 190, height: 11 },
];

const App = () => {
  const [pokemon, setPokemon] = useState(initialState);
  return (
    <>
      <h1>Pokemon!</h1>
      <PokemonList pokemon={pokemon} />
    </>
  );
};

export default App;