Part 3 of 5: React Coding Practice Problems

-Jon Christie

Implementing client-side routing with React Router

Let’s knock this out in one file, App.tsx:

// SIMPLE CLIENT SIDE ROUTING!

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

// Let's start creating Home, About, and Contact components so we know which page we're on!

const Home = () => {
  return <h1>Welcome to the Home Page</h1>;
};

const About = () => {
  return <h1>About Us</h1>;
};

const Contact = () => {
  return <h1>Contact Us</h1>;
};

// Now we'll create the App component and add the BrowserRouter component wrapping the Routes wrapper component for the routes we want to use. 
// We'll also add the nav component with the links to the pages we want to navigate to.


const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
        <Route path="/contact" element={<Contact/>} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Building a data table component

Let’s keep it simple and create a components directory with a DataTable.tsx component inside:

import React from 'react';

interface DataItem {
  id: number;
  name: string;
  email: string;
}

interface Props {
  data: DataItem[];
}

const DataTable: React.FC<Props> = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map((key) => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            {Object.values(item).map((value) => (
              <td key={value}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default DataTable;

Now we’ll pass it some props using dummy data we create in App.tsx:

import React from 'react';
import DataTable from './components/DataTable';

const data = [
  {
    id: 1,
    name: 'John Doe',
    email: 'johndoe@com.com',
  },
  {
    id: 2,
    name: 'Jane Doe',
    email: 'janedoe@com.com',
  },
  {
    id: 3,
    name: 'John Smith',
    email: 'johnsmith@com.com',
  },
];

export const App = () => (
  <div>
    <DataTable data={data} />
  </div>
);

Told ya, we’re keeping it simple this time! Two React challenges knocked out in 3 files 👍

WORKING CODE:

Implementing client-side routing with React Router

Building a data table component

— Jon Christie

jonchristie.net