React App Kata 4 Typescript

April 13, 2018 ยท View on GitHub

Code for Kata 4 Typescript is available in the app-ts-4 folder.

Learning aims

The idea here is learn how to add a router to our react app.

Task

You are given an app that lists all redgate products by name.

Write the TypeScript/React code to:

  • Navigate to each product page
  • Be able to share hard links of any product page
  1. Install react-router-dom and it's TypeScript bindings:
    • yarn add react-router-dom @types/react-router-dom
  2. Add BrowserRouter around the App component in index.tsx
  3. Create hard links in the ProductItem component to link to /products/productName e.g: /products/ReadyRoll
  4. The <ProductContainer /> component displays details about the selected component. Make the <ProductContainer> render ONLY when the location changes to a product name. i.e: when the URL is localhost:3000/products/ReadyRoll, render <ProductContainer>.
  5. Show the product name given by the URL in the <ProductContainer>
    • For <ProductContainer /> to pick up /products/:productName, it's Props interface needs a field with the name productName
    • Access Route Params in React Router v4
    • Using parameters in Route path
    • NOTE: if you use this.props.match.params.productName to get the product name you will have to extend your Props interface to include the RouteComponentProps
    import { RouteComponentProps } from 'react-router-dom';

interface Props extends RouteComponentProps<{ productName: string }> {
}
  6. Inside <ProductContainer> find the correct product from data.products and display it using the <ProductComponent> component.

Resources