React.js Basics — Part 4 (for starters and Angular Developers)

Introduction

In this post, we will resume our journey of learning React.js with few more examples. In this session, we will cover following topics:

• Generic Table Component
• React one-way Data Flow

First item is mainly an enhancement on the code, which we wrote in previous session (showing vehicles data in a table). This will result in reusable generic table component to display tabular data for different entities.

Second item covers basics of React one-way data flow, which is a very important concept to understand. We will see a simple example to understand how this works.

Generic Table Component (Refactoring)

In part 2 of this series, we created a VehicleTable component to display vehicles data.

Now, displaying data in a table is a very common requirement. So, instead of creating separate components for each entity, we can create a generic table component.

Furthermore, I would like to suggest an excellent article written by Tania Rascia and it is mentioned on official reactjs website. It is an excellent post for new react developers and I will suggest to check it and see how she built a table component.

Here is an attempt to make a reusable table component:

We’ve a Table component where we can pass data and headers:

you can check the source code from the git repository. But mainly it is just a simple enhancement on the previous example. Also It is written with functional components (instead of class components) and is more reusable.

React One-way Data Flow

In previous Post, we created a Button component with state (counter) as shown below:

counter increments whenever button is clicked:

Now, lets assume, we want to separate out the display concern to a separate component. So, I have setup the following:

button.jsx

It is mostly the same code from previous examples.

instead of inline handler, introduced a handleClick function.

display.jsx

A simple component with place-holder (here we want to display the information about the button click)

dataflow.jsx

It is the container component which houses both Button and Display components:

Here is the browser output:

Issues

Counter is currently a state element in the Button component and we need to access it in the Display component (display is sibling of button component). So this is not gonna work.

• The state in react component can be accessed only by that component itself and no one else.

To make the counter state accessible to both siblings components, we need to lift it one level up and put it in their parent component, which is the dataflow component that we just introduced.

This is what also called React one-way data flow.

React One-Way Data Flow

In React JS, data flows in one direction, from Parent to Child. This helps components to be simple and predictable.

Unidirectional Data Flow is not a concept unique to React, but as a JavaScript developer this might be the first time you hear it.

In general this concept means that data has one, and only one, way to be transferred to other parts of the application.

Solution

Here is how the arrangement is done:

display.jsx

it is accepting a property message for display purposes.

button.jsx

It is also simplified now. It has no longer state concern and accepting a handler function via props.

dataflow.jsx

Parent now have the code which was earlier in the button component.

Here is the output:

Designing Components

If you notice, Button component has no clue, what happens when it is clicked, it just follows the rule defined by the parent and invokes a generic onClickFunction.

The parent controls what goes into that generic behavior. Its a separation of responsibility.

Look at Display component, from its point of view, the message value is not a state, its just a value that dataflow component is passing to it. It just displays the message.

As the designer of these components, you get to choose the level of responsibilities.

Where to define the state?

General tip: Its simple, down in a tree as close as possible to the children who need to access that value on the state.

Summary

In this post, we build a table component to display tabular data which we can reuse to display data for various entities.

We also learned basics of react one-way data flow.

You can download the source code from this git repository.

The published application is available on this link.

Let me know if you have some questions or comments. Till next time, Happy Coding.

My Recent Books