React By Example: Part 7
Wrapping up the series with miscellaneous topics.
This article is part of a series (starting with React By Example: Part 1) of articles that, through a number of progressively more complicated examples, explores the React JavaScript library. The examples are available as a GitHub repository.
In this part we wrap up the series with a cursory look at the component lifecycle and learn about React Developer Tools.
First, Facebook maintains excellent documentation on the component lifecycle. As such, we will focus on providing representative examples of how the common related methods are used.
Constructor
Starting with the React re-implementation of our counter application, we used the constructor (first called once a component is mounted) to initialize the state.
excerpt from src/App.js
...
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
...note: We also accept the argument props (properties) and pass it onto the parent constructor with the super(props) command; used to initialize the props property on the component for use in the constructor (unnecessary in our simple case).
Render
The render method is the single required method for a component. It is called when the component mounts and any subsequent updates. Updates are triggered by:
- setState being called (as in the App component in our example)
- Parent component being rendered (as in the Counter component in our example).
componentDidMount
Called after the component mounts, this is the recommended method to implement network requests (or any other asynchronous action).
To keep things simple, we will set the counter value to an initial state (imagine comes from the network) after two seconds.
updates to src/App.js
...
componentDidMount() {
window.setTimeout(() => this.setState({ counter: 100 }), 2000);
}
render() {
...React Developer Tools
React Developer Tools are a Chrome extension available in the Chrome Web Store.
Once installed, select the React tab in Chrome Developer Tools. The tool details the component hierarchy including component state and properties.
Wrap-Up
At this point, you have been exposed to the core features of React; it is actually a fairly simple library. With this knowledge, you are in a good position to start building React applications. At the same time, you will undoubtedly find yourself using a number of complimentary libraries in your final application; here are some common ones:
- Fetch API: Modern browsers support a simple API for making network requests (called Fetch); to use this API across all browsers you will need to use the fetch polyfill.
- React Router: As your application grows, you will might want to create bookmarkable URLs in your application.
- Redux: As your application state become non-trivial, you will find it difficult to manage; Redux is the defacto-standard for advanced state management with React. I have written a series, starting with Redux by Example: Part 1, that you might find helpful.
- React Redux: As Redux itself has nothing to do with React, you will want to use this library to integrate the two.
- Redux Form: Redux Form is the defacto-standard way to easily incorporate forms into your application.
Additionally, you will likely find yourself outgrowing Create React App and needing to manage your build process more directly; you undoubtedly will be using webpack. I have also written a series, starting with webPack by Example: Part 1 that you might find helpful.
