React Advanced (Hands-on)

Are you an experienced React developer and curious to deeply dive into advanced topics and the latestchanges? This course is based around the following areas: Code reuse, Performance, Correctness andRefactoring. React is introducing new functionality to address challenges that come with above areas. Thiscourse shows you what you can do to make your React program easier to build, smaller, faster and correct.Some of the changes might be released in the future, but that doesnʼt mean we cannot explore the changesand write demos. The course will be a combination of many demos, presentations and hands-on labs.

What you will learn:

• Patterns
• New Context API (React 16.3)
• Hooks (~Q1 2019)
• Profiler (React 16.5)
• Performance
• Concurrent Mode (~Q2 2019)
• Suspense (React 16.6 and ~Q3 2019)
• Considerations for maintainable projects 
• Jest
• Storybook

Audience:

This course is intended for experienced React developers interested in patterns, performance and
new/future topics like Hooks and Concurrent React.

Participants are expected to have at least a year of React hands on experience. Basics like class and
functional components, properties, events, state, lifecycle methods and Redux should be familiar.

Content:

Do you know React?

• Lesser known React functions
• Peek under the hood

Patterns:

• Container pattern
• Render-props
• Transclusion
• Implicit State pattern / Slots (see: Context)
• New modern patterns
• Optional: Higher-Order Components

Context API (Implicit State pattern):

• Provider
• Consumer

Using Hooks:

• Rules of hooks
• useState() vs useReducer()
• useEffect() vs useLayoutEffect()
• useTransition
• useOptimistic
• React 19 Hooks (including use)

Writing Hooks:

• Writing Custom Hooks

Server:

• Server Components
• Server Functions

Profiler (DevTools):

• How to use

Performance:

• MemoCompontent
• memo()
• useCallback() Hook
• useMemo() Hook
• react-virtualized
• React compiler

Suspense:

• Preparations: Strict Mode
• Suspense component
• Suspense list
• Code splitting
• Data fetching

Considerations for maintainable projects:

• Naming
• Code & folder organisation
• More?

Jest & Testing Library:

• Unit tests
• Testing asynchronous code
• Setup & Teardown
• Mocks
• Snapshot testing
• Integration tests
• Test React Applications

Storybook:

• Writing stories
• Using popular addons: Actions, Console, etc.
• Manual testing

Appendix:

• Content Security Policy
• TypeScript

Optionally:

• Accessibility

Other relevant courses