Course: Section

Get Started with Modern React: Step by Step

Episode: Title

S02・V24: Thinking in React (Part 2)

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will start building a static version of “FilterableProductTable”.
  2. We will build a static version of “SearchBar”.
Watch Video
Duration: 5m 33s

Step 2: Build a Static Version in React

Now that you have your component hierarchy, it’s time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.

We will see why.

To build a static version of your app that renders your data model, you’ll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. Don’t use state at all to build this static version. state is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don’t need it.

You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy or with the ones lower in it. In our case, you can either start with building FilterableProductTable or with ProductRow. In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up and write tests as you build. In our case, we will go top-down, starting with the FilterableProductTable. At the end of this step, you’ll have a library of reusable components that render your data model.

The components will only consist of the return expression since this is a static version of your app. The component at the top of the hierarchy – the FilterableProductTable – will take your data model as a prop. If you make a change to your underlying data model and call ReactDOM.render() again, the UI will be updated. It’s easy to see how your UI is updated and where to make changes since there’s nothing complicated going on. React’s “one-way data flow” – also called “one-way binding” – keeps everything modular and fast.

Let’s start building.

We will assign the data to a constant called PRODUCTS.

const PRODUCTS = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football"
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball"
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball"
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch"
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5"
  },
  {
    category: "Electronics",
    price: "$199.99",
    stocked: true,
    name: "Nexus 7"
  }
];

Now, we will render our top-level component, the FilterableProductTable, to the DOM, passing in the PRODUCTS data to a prop that we will call lowercase products.

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
  document.getElementById("root")
);

At the top of our file, we will import React and ReactDOM.

import React from "react";
import ReactDOM from "react-dom";

Now, let’s define the FilterableProductTable component.

First, we will destructure products from props. We will get started with the return expression, wrapping everything in a div which gives its contents a sans-serif font style. At the top of the FilterableProductTable, we will place the SearchBar, which takes the user’s input. Below the SearchBar, the ProductTable element will be displayed. For the time being, we will add some placeholder text, so that we can work on the ProductTable component later.

const FilterableProductTable = props => {
  const { products } = props;

  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <SearchBar />
      ProductTable goes here
    </div>
  );
};

Next, we will define the SearchBar component.

It will return a form which will contain the user input fields. The first input is a input type="text", with some placeholder text. For the next input, we will wrap it in a p. We will add a input type="checkbox". And a green label for the checkbox input after a space.

import React from "react";
import ReactDOM from "react-dom";

const SearchBar = () => {  return (    <form>      <input type="text" placeholder="Search..." />      <p>        <input type="checkbox" />        {" "}        <span style={{ color: "green", fontSize: "smaller" }}>          Only show products in stock        </span>      </p>    </form>  );};
const FilterableProductTable = props => {
  const { products } = props;

  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <SearchBar />
      ProductTable goes here
    </div>
  );
};

const PRODUCTS = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football"
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball"
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball"
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch"
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5"
  },
  {
    category: "Electronics",
    price: "$199.99",
    stocked: true,
    name: "Nexus 7"
  }
];

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
  document.getElementById("root")
);

Summary

We started building a static version of FilterableProductTable, and we built a static version of SearchBar.

Next Up…

In the next video, we will continue with Part 3 of “Thinking in React”.