Chapter 3. React overview

 

This chapter covers

  • How the virtual DOM works
  • React’s functional nature
  • Using JSX to declare React components
  • Using React state to handle user interaction

React is a library for creating user interfaces, invented and used by Facebook. The React ecosystem has expanded rapidly over the last few years. It’s now possible to use React in many types of applications and architectures. This chapter will teach you what you need to know about React to build an isomorphic application. I’ll start by teaching you some React basics. The next chapter covers React component patterns and introduces React Router.

Note

Before getting started with this chapter, I recommend installing the React Developer tools for Chrome or Firefox. This will make debugging your React code much easier. I use React 15.6.1 for the examples in this chapter. Chapter 9 includes a detailed explanation of the React Developer tools.

For a complete view into React, you can explore the many books on the subject, such as React Quickly by Azat Mardan (Manning, 2017). Feel free to skip over this chapter if you already have experience using React.

A note on the code and libraries used for this chapter: you can download the code from the GitHub repo at https://github.com/isomorphic-dev-js/chapter3-react-overview. To get up and running with the example, see README.md. To ensure that you have everything set up, make sure you run the following commands:

3.1. Overview of React

3.2. Virtual DOM

3.3. Todo app overview

3.4. Your first React component

3.5. Interactive components: React state

Summary

sitemap