React Lifecycle


Welcome to the Part 5 of this new series reviewing Cory House’s Pluralsight course Building Applications with React and Flux.

Cory is a Microsoft MVP in C#, founder of, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.
Building Applications with React and Flux is the prequel to Cory’s course Building Applications with React and Redux in ES6.

Also in this series:

Part 1 – Introductory topics

Part 2 – Environment Setup

Part 3 – React Core Concepts

Part 4 – Creating Components Introduction

This episode explores the 5th module of this course

React Lifecycle


In Part 4 we created our first, simple React components. Now we build on this by learning how to build more dynamic components.

Props and State

Props – look like HTML attributes but immutable

Example: this.props.username

Props are passed down from, and effectively owned by, a parent component.

State – holds mutable state

Example: this.state.username

Only use state in your controller views (the top level component).

Cory introduces us to getInitialState and getDefaultProps

If you want to learn more about immutability in the React ecosystem, Cory’s follow up course Building Applications with React and Redux in ES6 has much more on it.

Component Lifecycle

This should feel familiar to ASP.NET developers, especially those who’ve worked with Web Forms before.

The following functions allow us to hook into various parts of the component’s lifecycle:

All the above links point to the official react documentation. Cory explains each of these functions and shows when and why to use them.

Keys for Dynamic Children

When creating multiple child components dynamically, we need to add a key to each one.

It’s common to use the element id as the key, but you don’t have to.

<tr key={}>

Demo: Mock API Setup

Any interesting web app is most likely going to be reading and writing data from the server. Here we mock out a traditional web API.

The code for this Author API is available from Cory House on Github Gist, and it has the following functions:

  • getAllAuthors
  • getAuthorById
  • saveAuthor
  • deleteAuthor

The top of this file references an authorData component.

We add authorData.js and set module.exports to an object literal with our author information.

We also see how to install lodash using NPM.

Demo: Dynamic Data and Lifecycle

We create our new component in authorPage.js, and add a reference to it in main.js.

We update our switch statement in main.js: this is started to look ugly now but Cory says we’ll be replacing this code with React-Router soon.

We also update our header.js to add a link to the new page that we’ve just created.

Next, Cory adds state into authorPage.js – we want to populate each row of our table with the information relating to a single author from authorData.

We set the initial author state by in the return value of the getInitialState lifecycle method. We simply return  {authors:[]}

In componentWillMount we use setState

We also need a new function createAuthorRow which takes our author as a parameter returns a table row containing that author’s data. We must remember to set a key value here, and we display the author’s id, firstname and lastname.

Our author page now renders successfully. In the next episode, we’ll learn how controller views make our code more maintainable, and more scalable.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s