Welcome to Part 3 of this comprehensive review and summary of Cory House’s Pluralsight course Building Applications with React and Redux in ES6.

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.

Also in this series:

Part 1 – Introduction and Background

Part 2 – Environment Setup

Part 3 – React Component Approaches

Part 4 – Initial App Structure

Part 5 – Intro to Redux

Part 6 – Actions, Stores and Reducers

Part 7 – Connecting React to Redux

Part 8 – Redux Flow

Part 9 – Async in Redux

Part 10 – Async Writes in Redux

Part 11 – Async Status and Error Handling

Part 12 – Testing React

Part 13 – Testing Redux

Part 14 – Production Build

React Component Approaches

Four Ways to Create React Components

1. ES5 react.createClass
2. ES6 class
3. ES5 stateless function
4. ES6 stateless function

Cory explains that there are other ways to create components as well. They aren’t covered in this course, but you can read about them here.

ES5 Create Class Component

We see the original syntax for creating a React component

ES6 Class Component

Cory explains the main difference is No Autobinding in ES6: you have to explicitly set the onclick attribute in your HTML.

If you are confused about, or inexperienced with the this keyword in JavaScript, I highly recommend this explanation from quirks mode.

Cory cites performance reasons for not calling bind inline within your render function. The bind keyword creates a new function every time render runs in React.

ES5 Stateless Component

This was introduced in React v0.4 and has a simpler syntax.

ES6 Stateless Component

This is declared using the const keyword.

We see the class style, and the stateless style, side by side and can see that the stateless style has 6 less lines of code, and some of the remaining lines are shorter – about 20% less code overall.

Cory describes the following benefits of stateless functional components:

• No class needed
• Avoid this keyword
• Enforced best practices
• High signal-to-noise ratio
• Enhanced code completion / intellisense
• Bloated components are obvious
• Easy to understand
• Easy to test
• Performance

When Should I Use Each Style?

Cory begins by recommending using the stateless functional style whenever possible, and then provides more details on what this means in practice.

Other Ways to Create Components

There’s a ton of ways to create React components, including:

• Object.create
• Mixins
• Parasitic Components
• StampIt

This is the last that we’ll hear about them in this course.

Container vs. Presentation Components

Cory explains the many differences between container components, and presentation components

Containers

• Little to no markup
• Pass data and actions down
• Know about Redux
• Often stateful

Presentation

• Nearly all markup
• Receive data and actions via props
• Don’t know about Redux
• Typically stateless functional components

Cory recommends trying to make most of your components Presentation components.

He also lists some alternative jargon for these terms, which are effectively different ways of describing the same two things. Finally, we hear some explanation of commentary on the following quote:

“When you notice that some components don’t use props they receive but merely forward them down…it’s a good time to introduce some container components.”
– Dan Abramov

Continue to Part 4 – Initial App Structure