Welcome to the Part 6 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 1 – Introductory topics

Part 2 – Environment Setup

Part 3 – React Core Concepts

Part 4 – Creating Components Introduction

Part 5 – React Lifecycle

This episode explores the 6th module from this course

React Composition

Controller View

In the last episode we created an author page. Our focus now is breaking this down using the controller view pattern.

React makes it easy to compose small pieces together, and that’s fundamental to the scalability that React provides.

A controller view is a top level React component; that is it has child components but no parent component.

Controller views set the props on its child components, and can interact with Flux stores.

Demo: Controller View

Our authorPage currently sets markup but also has logic that handles state.

Let’s refactor the markup into a child component called authorList.

Cory creates authorList.js, and copies the authorPage.js code as a starting point. We don’t need getInitialState or componentWillMount. All we need here is our render function.

Instead of mutable state, authorList will receive it’s data via props.

With our authorList created, we can now greatly simplify our authorPage component, which gets reduced down to just 30 lines of code.

We can think of our authorPage as our smart component. It knows how to go out, get the data, set it up and pass the relevant data down.

Our authorList is a dumb component and merely renders the markup based on the props it receives.

Prop Validation

Prop types are a map that let you specify a validation function for each property.

I think of them as quite a bit like DataAnnotations in ASP.NET MVC

We can add validation to require specific datetypes: arrays, booleans, functions, numbers, objects and strings. They can give you more confidence in the quality of your code.

For performance reasons, they only exist in the development version of React, and are removed when creating the production build.

For detailed information see Facebook’s Prop Validation documentation

We are going to set the following propTypes:

• author
• onSave
• validate
• errors
• hasErrors

Demo: Prop Validation

We start in authorList.js, our “dumb” component. Within createClass we define our propTypes.

Cory demonstrates that if we don’t include the required propTypes in the JSX, we don’t see anything rendered, and we get a helpful warning as well as an error logged in the console:

Warning: Failed propType: required prop 'authors' was not specified in 'AuthorList'. Check the render method of 'Authors'  

Uncaught TypeError: cannot read property ‘map’ of undefined

Without the propTypes we don’t see the warning and only see the less helpful error.

In short, propTypes let us declare our expectations for a component.

Mixins

These are for handling cross-cutting concerns and sharing code between multiple components

We’ll be looking at these fully in the next episode.