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.
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:
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 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.
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.