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 OutlierDeveloper.com, 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 4 – Creating Components Introduction
This episode explores the 5th module of this course
React Lifecycle
Introduction
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:
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
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={author.id}>
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.
Zombie Code Kill 