Chapter 7. React Addons

In the previous chapter, we learned to use React on the server side. We understood pre-rendering of the React components and changes in the component life cycle when using React on server. We also saw how to use server-side API of React using Express.js.

In this chapter, we will look at React addons—utility packages that are not a part of React core, however, they make development process fun and enjoyable. We will learn to use immutability helpers, cloning of components, and test utilities in this chapter. We will not be covering other addons such as Animation, Perf, and PureRenderMixin. These addons will be covered in the following chapters.

In this chapter, we will cover the following topics:

• Getting started with React addons

• Immutability helpers

• Cloning React components

• Test helpers

Getting started with Addons

After completing the previous project about using React on server side, Mike's team got some free time before starting the next project. Mike decided to utilize this time by learning about React addons.

"Shawn, we got some free time. Let's use it to get started with React addons."

"What are React addons? Are they related to React core library?" Shawn asked.

"React addons are utility modules that are not a part of the React core library. However, they are blessed by the React team. In future, some of them might be included in the React core. These libraries provide helpers for writing immutable code, utilities for testing React apps, and ways to measure and improve the performance of React apps." explained Mike.

"Each addon has its own npm package, making it to simple to use. For example, to use the Update addon, we need to install and require its npm package."

  $ npm install  react-addons-update --save

  // src/App.js
  import Update from 'react-addons-update';...

Cloning components

"Shawn, props are also immutable in React. In most of the cases, the child component just uses props passed by the parent component. However, sometimes we want to extend the incoming props with some new data before rendering the child component. It's a typical use case to update styles and CSS classes. React provides an addon to clone a component and extending its props. It's called the cloneWithProps addon." said Mike.

"Mike, that addon is deprecated. I had looked at it in the past and React has deprecated it. It also has lot of issues related to refs of the child component not getting passed to the newly-cloned child components," Shawn informed.

"True. However, React also has a top-level React.cloneElement API method, which allows us to clone and extend a component. It has a very simple API and it can be used instead of the cloneWithProps addon." Mike explained.

React.cloneElement(element, props, …children);

"This method can be used to clone the given element and merge the...

Summary

In this chapter, we started with understanding the React addons and how to use them. We used immutability helpers and test utility functions provided by the addons. We also looked into how to clone the components.

In the next chapter, we will make our React app more performant. You will be learning about addons that will improve the performance of the React apps. Specifically, you will learn how to measure the performance of our apps and how React can make faster updates without changing most of the UI.

Let's make our React apps faster!