React: Components, Context, and Accessibility

1h 11mAdvanced2018-07-17

Authors

Eve Porcello

Software Developer and Instructor

Course details

Once you've mastered the foundations of the React framework and its supporting architecture, you can start taking advantage of more sophisticated features that enable faster and more accessible applications. In this course, learn about the enhancements found in React 16 and how to leverage key features to build better React apps. Explore advanced components and patterns that can help you structure your applications more cleanly. Instructor Eve Porcello also shows how to use the context API, build accessible semantic content, and more.

Learning objectives
What's new in React 16
Rendering arrays
Controlled, uncontrolled, and compound components
Using keyed fragments
Working with new lifecycle methods
React patterns
Using the context API
Checking for accessibility issues in your React code

Skills covered

AccessibilityReact.jsMetaDiversity, Equity, and Inclusion (DEI)Front-End Web DevelopmentUser ExperienceWeb DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Welcome
02 - What you should know before watching this course
03 - Using the exercise files

1. What s New in React

04 - What's new in React 16
05 - Rendering arrays
06 - setState() changes

2. Advanced Components

07 - Compound components
08 - Uncontrolled components
09 - Controlled components

3. Enhanced Components

10 - Working with fragments
11 - Using keyed fragments
12 - New component lifecycle

4. React Patterns

13 - Understanding the context API
14 - Using context
15 - Referencing context in stateless functional components
16 - Working with higher-order components
17 - Working with render props
18 - Render props in the wild - React Apollo

5. React Accessibility

19 - Web accessibility overview
20 - Viewing React accessibility warnings
21 - Using semantic HTML
22 - WAI-ARIA roles
23 - Accessibility testing

Conclusion

24 - Next steps