• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/31/22

Break requirements down into components

Log in or subscribe for free to enjoy all this course has to offer!

Suppose we've been asked to create an app that renders a sortable, searchable list of products in an imaginary store, and allows the user to add and delete products from the list.

Based on some unstyled HTML, it's supposed to look something like this:

What we see:

  • There's a search input at the top that should filter the products as you type, so that only products who match the current search string are shown.

  • The "Only show products in stock" checkbox should hide any products that aren't in stock (shown in red).

  • In the table, each column should be sortable in ascending and descending order, and the current sort should be highlighted.

  • On the right, there are buttons to remove any of the items from the list.

  • At the bottom, there's a form to create a new product. When you hit "save", it should add your new product to the list.

We're not going to address how we get the data or save it after changes have been made. Instead let's assume that we have a JSON API that provides us with data like this:

var PRODUCTS = {
'1': {id: 1, category: 'Musical Instruments', price: '$459.99', stocked: true, name: 'Clarinet'},
'2': {id: 2, category: 'Musical Instruments', price: '$5,000', stocked: true, name: 'Harpsicord'},
'3': {id: 3, category: 'Musical Instruments', price: '$11,000', stocked: false, name: 'Fortepiano'},
'4': {id: 4, category: 'Furniture', price: '$799', stocked: true, name: 'Chaise Lounge'},
'5': {id: 5, category: 'Furniture', price: '$1,300', stocked: false, name: 'Dining Table'},
'6': {id: 6, category: 'Furniture', price: '$100', stocked: true, name: 'Bean Bag'}

To create our demo app, we're going to closely follow the recommended steps for defining and creating a React App in the official documentation for getting started in React. We're going to be building something somewhat more complex than the example app in the documentation, and using the directory setup that  create-react-app  has provided us with, but the steps are the same.

This means our first steps will be to identify the components in our mockup, and write a static version of the app.

Step One: defining components

We want our components to be as simple and as easy to understand as possible. Each component should represent a discreet bit of logic and have a single purpose. There are no hard and fast rules for composing components, but if something seems complicated, it can often be refactored into a new component. Let's walk through the process of breaking up our mock into component parts.

We'll start by just listing all the parts we see.

  • a search field that queries the list

  • a 'stocked' filter that also queries the list, reducing it to just stocked items

  • a table of products, which is itself made up of:

    • column headings that each have two buttons for sorting

    • rows of products, that each have a delete button

  • a form for adding to the list, which is made of three text inputs, a checkbox, and a 'save' button

The first two items seem related, since they both filter the form. I can see them comprising a single component. An argument could be made to break them up into two components, but since neither of them is reused, and their functionality is going to be pretty similar, we'll keep it at one to restrict the number of components.

The products table seems like a component by itself, perhaps with nested components for the sorting and deleting buttons.

Everything on this list pertains to products in some way, so I'm going to nest these three components under a Products component that will be responsible for rendering everything else.

The component tree for our app ends up looking like this:

  • Products

    • Filters

    • Product Form

    • Product Table

      • Product Table Headers

      • Product Row

Example of certificate of achievement
Example of certificate of achievement