YoVDO

Build a Server Rendered + Code Split App in React with React Universal Component

Offered By: egghead.io

Tags

React Courses Web Development Courses Redux Courses Webpack Courses Babel Courses Server-Side Rendering Courses Code Splitting Courses

Course Description

Overview

In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement—we need faster rendering speed and smaller network requests!
You’ll learn how to both split code into lazily loaded bundles AND server-side render your page.
This has not been possible until very recently—you had to choose either code-splitting or SSR. Sure you have Next.js which is awesome, but it’s a framework that you need to buy into. With react-universal-component you are getting a framework-less Next.js that is in your control!
The react-universal-component library does a great job making it as simple as can be, but there are still various specific configurations and practices that must be followed to get it working. So watch the videos to learn how it’s done!

Syllabus

  • Install the NPM Dependencies Needed for a Universal React App
  • Configure Webpack to Work with React Universal Component
  • Configure Express / React / Babel to Work with React Universal Component
  • Configure hot module reloading to work with react-universal-component
  • Code-Splitting Components with the Universal Higher-Order Component
  • Dynamically Load a Code-Split Universal React Component via a Prop
  • Configure a Custom Universal React Loading Component
  • Animate a Universal React Loading Component using Delay Options and Component Hooks
  • Set an Error Component in React Universal when a Component Fails to Load
  • Preload a Universal Component On-Demand with the Preload Method
  • Load a Universal React Named Exported Component with the Key Option
  • Add Redux with Server-to-Client State Hydration to a React Universal Project
  • Lazy Load Redux Reducers with Code-split Universal React Components using onLoad

Taught by

Tim Kindberg

Related Courses

30 Days to Learn Laravel
Laracasts
3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn
A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn
Accessibility Audit
Amazon Web Services via AWS Skill Builder
Expanding Your JS Skills with Angular
A Cloud Guru