Chapter 11. React Tools

In the previous chapter, we learned how to use Animation add-on and CSS transition. We have also explored different events and studied how to easily enhance our application in order to create stunning effects using animations.

In this chapter, we will look at various tools in the React ecosystem, which are useful in the whole lifetime of an application—the development, debugging, and build tools. We will see how these tools make developing React applications a beautiful experience.

We will study the following tools in this chapter:

• Babel

• ESLint

• React Developer Tools

• Webpack

• Hot reloading using Webpack

Mike and Shawn had some free time before starting their next project. They decided to spend this time in learning more about various tools that they had used so far in their React projects for development, testing, and bundling the apps.

Development tools

"Shawn, today I would like to discuss about the tools that we have used until now while building our React apps today. React is a very small library, which does one thing right—rendering the UI. However, we had to use a lot of other tools with React throughout our journey until now. Today is the day to discuss everything about them." said Mike.

"Awesome, Mike! I am ready as always. Let's get rolling." exclaimed Shawn.

Using Babel for ES6 and JSX

"Shawn, we have used ES6 or ES2015 code since the beginning. We are also very bullish about using JSX. Sometimes, we have also used ES7 code, such as the function bind operator in our latest Cats Pinterest project."

// src/Home.js

class Home extends React.Component {
  componentDidMount() {
    this.timer = setInterval(::this.generateCats, 1000);
  }
}

"Yes, Mike. I loved the conciseness of these new features." said Shawn.

"However, current browsers still don't understand the ES6 or ES7 code that we have written. We use Babel to transform...

React Dev Tools

"Shawn, React is excellent at improving the developer experience. They have released react-dev-tools to help us in debugging our apps. React developer tools are Chrome and Firefox add-ons, which make debugging React apps fun."

"Once you install the add-on, you will then see a React tab in the browser console while running a React app. An interesting thing is that this tab is also shown for websites that use React in production too, for example, Facebook."

"Once we click on the React tab, it shows all the components in our app."

"Shawn, as you may have noticed, we can see all our components on the left-hand side pane. On the right-hand side, we see props and state of the component selected in the left pane. Therefore, we can inspect UI state at any point of time. We don't need to add console.log statements to see what is happening with our components."

"More than this, it provides us with a temporary variable—$r. The selected component from the console is available as $r in the...

Build tools

"Shawn, the build system is arguably the first thing that we should care about when creating a new web application. It is not only a tool for running scripts, but in the JavaScript world, it usually shapes the basic structure of our application."

The following responsibilities should be performed by a build system:

• External dependencies as well internal dependencies should be managed

• It should run compilers/preprocessors

• It should optimize assets for production

• The development web server, browser reloader, and file watcher should be run by it

"There are a lot of different tools such as Grunt, Gulp, and Browserify, which can be used as part of our build system. Each tool has its own advantages and disadvantages. However, we have decided to go with Webpack in our projects." said Mike.

What is Webpack?

"Webpack is a module bundler. It bundles our JavaScript with its dependencies into a single package."

"Unlike Browserify and other tools, Webpack also bundles other assets such as CSS, fonts...

Summary

In this chapter, you learned about various tools from the React ecosystem—development, testing, and production tools that we have used in various stages of our app development. We discussed Babel, the JavaScript transpiler, to convert our next generation JavaScript code to ES5. We also saw how to use ESLint and React dev tools that make React development easy. In the end, we saw how Webpack can be used with React with its powerful loaders and configuration options. We saw how these tools can make developing React apps a beautiful experience.

In the next chapter, we are going to dive deep into Flux as an architecture. We have seen how problems arise during data sharing across components. We will see how to overcome them using Flux.