React, Redux & Router Course

Is the HTML of your SPA also filled with unmaintainable semi code? Is data binding debugging and performance causing you headaches? Don't you remember how data finds its way to the UI?

Lets react!

Facebook created a new functional approach to tackle traditional complexities in JavaScript: ReactJS (open source). Maligned in 2013, embraced in 2015 by the largest websites in the world. Lets build fast components in a lasting and meaningful way.

In this course you will learn all about React and its ecosystem. Afterwards you are able to add React parts immediately to both existing and new websites.

Audience:

This course is intended for professional developers who are familiar with HTML and JavaScript programming.

Content:

Introduction:

  • What is React?
  • Why React?

Module 1: Language constructs for React & Redux

  • EcmaScript 2015 and later (JavaScript)
  • JSX
  • Babel transpiler

Module 2: Basic

  • Render
  • Fragments
  • Properties & State
  • Databinding
  • Events

Module 3: Building Apps

  • Functional vs Class components, single responsibility
  • Multiple components
  • Reusable components (prop-types / typescript)

Module 4: Component Life

  • Component lifecycle
  • Fetch server data

Module 5: Developer experience

  • Debugging
  • Developer tools
  • Unit testing
  • Updating to new React versions

Module 6: Good to know

  • Error Boundaries
  • Forms
  • DOM interactions
  • Portals
  • Wrapping existing components
  • Optimizations (using shouldComponentUpdate).

Module 7: Setting up a project

  • Webpack
  • ESLint
  • Hot Module Replacement
  • Create-react-app
  • Zeit Next

Module 8: Redux Basics

  • Redux Basics
  • Redux Dev Tools

Module 9: React patterns (partly used by Redux)

  • Pattern: Higher Order Components
  • Pattern: Render Props
  • Context (Pattern: Implicit state)

Module 10: Advanced Redux

  • Presentational vs Container Components
  • React-Redux
  • Async actions
  • Redux Middleware
  • Redux Undo

Module 11: React Router

  • Static routing
  • No match (like a 404)
  • Dynamic routing
  • Redirection
  • Prompt

Module 12: Isomorphic Applications

  • Server side rendering (universal/isomorphic applications), ReactJS.NET, Search Engine Optimization (SEO)

Module 13: Styling

  • Animations
  • CSS, Inline styles

Module 14: Future

  • Suspense
  • Time Slicing

Rick Beerendonk - instructor of the course

Rick is a senior consultant and trainer from The Netherlands. He has over 20 years of professional experience while working in small, large and fast growing organisations. His passion is simplicity, well-written code and team dynamics. He is specialised in front-end technologies and speaks regularly about these topics at international events. Rick have teached and talked about React since 2014.

Other relevant courses