React Masterclass

Are you a junior or mid-level React developer? React Masterclass is an intensive course that will teach you advanced React patterns such as: Higher Order Components (HOCs), render props, hooks and more. Delivered by experienced developer, conference speaker and Manchester Codes tutor Ersel Aker, this course will allow you to hone your skills and further progress in your field.

Syllabus

Testing React Components
You’ll learn how to test components which rely on API calls with Jest and Enzyme, and you'll be able to answer the following 3 questions:

  1. What should I be testing?
  2. What should I be mocking?
  3. How do I write good test scenarios?

Application State Management
You’ll learn how to investigate application level state management techniques using the Context API natively, and also compare 3rd party state management libraries commonly used in the industry such as Redux and Mobx.

Component Composition Patterns
You can tackle complexity at its heart by constructing reusable patterns using HOCs (higher order components) and render props. We’ll study how both approaches can be implemented using practical examples.

React Hooks
React hooks introduces a completely new way of composing React components. We’ll investigate likes of useState, useEffect and useLayoutEffect. We’ll also look into how we can construct our own reusable hooks.

Server Side Rendering (SSR)
For SEO or performance reasons you might need to render your React application on the server before it’s served to the client. You’ll implement an SSR React app using Express and Node.js. Once we have covered the basics, we will investigate how we can achieve the same behaviour using the Next.js framework. We’ll also look into alternative approaches such as pre-rendered snapshots using react-snap and prerender.io.

Code splitting
Do you know how big your compiled bundle is? What if you could split the compiled bundle into little chunks which get loaded by the client’s browser as they navigate through your React application? We’ll look into 3 different ways of achieving this with loadable-components, React.lazy and suspense methods.

React Bottleneck Analysis
Does your React app feel sluggish? Learn how to pinpoint the problematic components, and techniques you can use to improve the render performance. We’ll use Chrome Developer Tools to investigate the performance of our webpages. We’ll look into PureComponent, shouldComponentUpdate, useMemo and useCallback techniques to optimise our React applications.

Real-time Front-end monitoring with ElasticSearch
Do you know if your last deployment slowed page load times or increased error rates of your single-page application (SPA)? You’ll learn how metrics such as page load, asset download, network call times and errors can be captured to monitor the health and performance of your front-end in real-time using ELK stack.

Prerequisites

About the tutor

Next Course

9th September 2019
Monday to Friday
09:00 to 18:00
Full Time - 1 week

To register your interest in this course, please enter your email below:

Ersel is one of the very best developers I have worked with in my 20+ years in the industry. He has an almost unique ability to communicate a deep academic knowledge in terms even the most junior of developers can understand.

Matthew BeasleyPrincipal UI Developer at BrightHR