Developing Modern React Patterns
Create Highly Flexible UI through Component Composition Patterns

If you’ve been using the React framework for developing exciting front-end JavaScript applications, you’re probably already familiar with common patterns and best practices when coming. At some point, however, you might realize that React was originally only intended to be a view layer, and you may find yourself mixing business logic into places which are really only meant to be concerned with rendering views. Not to worry though, because React’s wonderful lifecycle methods and concept of componentization makes it simple and fun to break off functionality and build robust components.
You will understand how to boil your UI down into the smallest possible units, and then compose them together as you need them. You will understand the beauty of inversion of control, whereby your components are only concerned with what they need to be, while allowing their consumers to handle the rest. If you and your team have already been using React for some time and perhaps find that you are running into issues with reusability (perhaps across a large codebase), then these lessons are for you!
What you'll learn-and how you can apply it
- Learn to separate concerns, specifically separating rendering logic from business logic
- Build reusable components which leverage React’s lifecycle and state to do things beyond simply rendering markup/UI
- Add some key patterns and tools into your developer toolkit, such as higher-order components, render props, and the context API
This training course is for you because...
- React developers who are looking to go beyond the basics of the framework
- JavaScript/UI developers using other frameworks who are looking to understand the ideas behind component composition
- Developers working elsewhere in the stack who want a deeper understanding of the React framework
Prerequisites
- A working knowledge of modern JavaScript (ES6+), as well as some basic CSS/HTML knowledge.
- A solid, foundational understanding of the React framework is required.
- A basic understanding of Git (mostly just being able to clone a repository).
Course Set-up
- I have created a git repository which features exercise code to allow you to follow along during the lesson, and reference later: https://github.com/himynameisdave/safari-training-react
- Make sure that you have Node installed on your machine (Node version 8.11.1 or higher) https://nodejs.org/en/
- I recommend using Node Version Manager for managing multiple versions of Node on the same system: https://github.com/creationix/nvm
- A text editor that you are familiar with using.
Recommended Preparation
- https://sunburn.in/?page=library/view/learning-react/9780134546513/
- https://sunburn.in/?page=library/view/learning-react-a/9780134843582/
Recommended Follow-up
- https://sunburn.in/?page=videos/advanced-react-js-livelessons/9780134676920
- Check out the recompose library, which provides helper methods for creating higher-order components: https://github.com/acdlite/recompose
About your instructor
-
Dave is a web developer and open-source JavaScript contributor based in Vancouver, BC. He is currently employed as a product developer at 7Geese, where he has been working with React and Redux on a daily basis for around 2 years now. Before that, Dave worked various contract positions where he led the development of several Redux-based web projects from the ground up. He is super passionate about JavaScript, and is extremely excited about its usage both in the browser and its potential well beyond the browser.
Schedule
The timeframes are only estimates and may vary according to how the class is progressing
Segment One: Breaking up logic (15 mins)
- Example: Tabs component
- Presentational vs container components
- Controlled vs uncontrolled components
Q&A: 5 mins
Segment Two: Compound Components (15 mins)
- React.Children
- Using Compound components
- Tabs example: Compound components
Segment Three: Inversion of control - Higher-order components (30 mins)
- Using Higher-order components
- Handling and forwarding refs
- Alternative higher-order component patterns
- Tabs example: Higher-order components
Segment Four: Inversion of control - Render-props (45 mins)
- Intro to render-props pattern
- Children-as-a-function
- Prop-getters
- Implied/shadow components
- Handling and forwarding refs
- Control props
- State reducers
- Tabs example: Render props
BREAK/Q&A: 15 mins
Segment Five: Providing Data: Context API (45 mins)
- When to use the Context API
- Not to use Context API
- Using the Context API
- Tabs example: Context API
FINAL Q&A: 10mins