Creating React components

React is a JavaScript library for user interfaces (UIs). Since version 15, React has been developed under the MIT license. React is component-based, and the components are independent and reusable. Components are the basic building blocks of React. When you start to develop a UI with React, it is good to start by creating mock interfaces. That way, it will be easy to identify what kinds of components you have to create and how they interact.

From the following mock UI, we can see how the UI can be split into components. In this case, there will be an application root component, a search bar component, a table component, and a table row component:

Figure 8.1: React components

The components can then be arranged in a tree hierarchy, as shown in the following screenshot:

Figure 8.2: Component tree

The root component has two child components: the search component and the table component. The table component has one child component...