Additonal Topics in React

Two additional concepts that appear frequently in React are the component life cycle and the Flux architecture.

Component Life Cycle

There are some additional points in the component life cycle that you may want to take advantage of. Examples include when props change, or when we remove a component from the DOM. In order to perform different actions during the life cycle of a component, just define the following functions in the component.

• componentWillMount – Fired once before the initial component render
• componentDidMount – Fires once after the initial component render
• componentWillReceiveProps – Fires whenever there is a change to props
• componentWillUnmount – Fires before the component unmounts from the DOM

Component documentation

Flux

While you can incorporate a server with React through a RESTful API and AJAX (jQuery), generally React is used with a different type of architecture called Flux. Watch the video on the Flux Overview page below to understand some of the benefits behind this highly-scalable architecture.

Flux Overview

Conclusion

React is substantially different from Angular because its main goal is to render UI based on data. We can keep track of static data using props, and keep track of dynamic data using state. By isolating data in state, we can keep track of when data is changed and re-render the UI accordingly.

Incorporating React with an API involves nothing special. In fact, you can use jQuery's .ajax function to make requests inside a React component, then call setState when the data is ready.

More Resources

• React with Gulp and Browserify
• Flux Architecture
• React Examples
• React Router
• React Addons
  • React Animations/Transitions
  • Two-way data binding
• React Authentication with Flux
• React starter kit