Intro to React
What is React?
React is a declarative, component-based JavaScript library used for building user interfaces. It was created by Facebook employee Jordan Walke and was first deployed on Facebook and Instagram in 2011 and 2012, respectively. React has quickly become a very popular and is feature on many of the worlds most popular websites and applications including Netflix, Imgur, SeatGeek and Airbnb, among others.
Getting Started
This post is going to walk us through how to conceptualize setting up and utilizing a search product table which relies on a mock API to provide the data needed to populate and render our app using the Facebook “Thinking in React” as a guide. The full article can be found here.
The Components
As mentioned before, React is a component based library. Constructing components allows for developers to enable the app to manage its own state, which then passes data “down” to other components throughout the app. As the data is being passed down, it will either be rendered to the DOM or passed down further to other components (which will then render the data to the DOM).
The Mental Model
Modeling an app can be tough, and it is not uncommon for our mental model to be a bit hazy while in the early stages of it’s design. Since React components conventionally exist inside of other React components, it is easy to conceptualize the blueprint of an application by (literally) drawing out the component’s relation to one another. The image below displays a rendering of the UI and uses highlighting to reflect how it is being rendered by each of the application’s components:

You can see there are five different colors, each of which is representing a different component within the application. The orange box represents our Application component, which will basically contain the every other component used within the app. The blue box represents our Search Bar component, whose sole purpose is to handle user input. The green box represents our Product Table, which is going to filter and render data based on the user input. The turquoise and red boxes each represent our Category and Product components, which are going to handle the categories for each product along with the product themselves.
The above image is a literal representation of what (and how)our application will render. Here is another representation of how we can conceptualize our component hierarchy:
- Application
- Search Bar
- Product Table
- Category
- ProductThe Trickle Down Effect
How does our application use each of the components to interact with one another? By passing down props. Even though React components are extremely powerful and dynamic, they are basically JavaScript functions. In the same way that functions rely on arguments to operate on and manipulate data, components rely on props that are given as a they being declared.
Using the example from above, it becomes easier to conceptualize how the Product and Category components are rendering the appropriate information onto the screen. The Application component has access to an API that provides information on all of its products. When the Product Table component is declared within the Application component, the Application will pass down this information related to all of the products to the Product Table as props. While the Search Bar component will be declared in a fashion similar to that of similar the Product Table, the props it is having passed to it are quite different. Remember, the search bar is used to handle user input. As such, the Search Bar component will inherit a set of functions that define how the products in the API will be filtered based on the user input.
The Category and Product components will then rely on the props passed down from Product Table to render the list of items, using the Search Bar component to filter the products based on the search terms and render only those products to the screen. Conversely, if the search bar is empty then each product in the collection will be rendered.
Divide and Conquer
Now that we have some idea of how we want each of our components to function, let’s sketch each of them out below to get some idea of how the code for the app might look:
class Category extends React.Component {
// renders categories
}
class Product extends React.Component {
// renders products
}
class ProductTable extends React.Component {
// declares a Category and Product component, passing props to
each of them <Category
category={product.category}
key={product.category}
/> <Product
product={product}
key={product.name}
/> // renders Category, Product
}class SearchBar extends React.Component {
// renders SearchBar
// filters based on search terms
}
class Application extends React.Component {
// renders SearchBar and ProductTable components, passing props to
each of them <SearchBar
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
onFilterTextInput={this.handleFilterTextInput}
onInStockInput={this.handleInStockInput}
/> <ProductTable
products={this.props.products}
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
}
Now that we have all of our components defined, rendering the application to the screen becomes as simple as using the ReactDOM.render function and passing the Application component to it.
ReactDOM.render(
<Application products={PRODUCTS} />,
document.getElementById('container')
);