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 3 – React Component Approaches
Part 4 – Initial App Structure
Part 6 – Actions, Stores and Reducers
Part 7 – Connecting React to Redux
Part 10 – Async Writes in Redux
Part 11 – Async Status and Error Handling
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.
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
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:
- Parasitic Components
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
- Little to no markup
- Pass data and actions down
- Know about Redux
- Often stateful
- 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