React and Redux Course

This course covers all the practical aspects of developing applications with React as a UI layer and Redux as a data management and server communication layers. By the end of the course, students will be able to join existing React projects and start developing features.

Standard Syllabus

This hands-on training consists of eight modules that cover both basic concepts as well as most of the common pain points engineers face daily when developing single-page applications with React and Redux.

I. Core Concepts

A walkthrough over React’s concepts and its approach for modern front- end development. Gaining a solid understanding of what is React and how it works with single-page apps.

  • High-level React: Virtual DOM, change detection, difference from other frameworks
  • Shifting mindset from MVC to component architecture
  • Ecosystem and popular libraries

II. Modern JavaScript and JSX

Acquiring knowledge and practical usage of modern JavaScript APIs and patterns used daily with React. Understand the advantage of JSX over templating engines.

  • JavaScript refresher: module system, classes, scoping, new operators, destructuring, etc
  • Leveraging new language features to write cleaner code
  • Understanding JSX: how it works, difference from templating engines, and its restrictions

III. Component Basics

Gaining solid understanding of React components. Getting familiar with terminology, learning different ways to create components. Understanding the render flow and lifecycle.

  • Props and State; difference between stateful and stateless components; PropTypes; Glimpse into useState hook
  • Component lifecycle methods, refs, event and input handling, conditional rendering; Glimpse into useEffect hook
  • Controlled, uncontrolled, and presentational components

IV. Introduction to Redux

Understanding what Redux is and why we should use it. Learning how to bring Redux into existing projects and how structure new ones.

  • Redux core concepts: single source of truth, unidirectional data flow, and immutability.
  • React and Redux: typical directory structure, connecting to store
  • Basic Redux parts: store, actions, reducers, and middleware

V. React and Redux Ecosystem

Getting familiar with some popular 3rd-party libraries required for most single-page applications.

  • Common approaches to styling: CSS-in-JS, styled components, plain old CSS
  • Routing with React and Redux, navigation, implementing layouts
  • Strategies, practices, and tools for handling immutable data

VI. Testing and Debugging

Reasoning about testing different parts of React/Redux applications. Effective debugging of unidirectional flow and complex UI trees.

  • Testing React components: snapshots and DOM, integration, end-to-end, visual, and manual
  • Testing logic: actions, reducers, selectors, and middleware
  • Debugging: general approaches as well as tools and extensions
During the course, the students will be practicing taught material on their laptops and will be able to ask questions related to their current projects.

Additional Modules

In addition to basic course modules, you can extend the course to include more advanced modules or materials that would be relevant specifically to your organization. Below are some of the proposed modules.

Advanced Components

Taking advantage of React’s powerful features for better and cleaner components. Advanced patterns for building reusable and extensible components.

  • Composition patterns: higher- order components; render props; React.Children
  • Glimpse into writing custom hooks for encapsulating and reusing behaviour
  • Useful React APIs: fragments, pure components, context, and portals
  • Performance considerations and optimizations, lazy loading components

Practical React

Diving deeper into popular 3rd-party libraries addressing common pain points in single-page applications.

  • Different approaches to styling, forms, and routing
  • Solving business problems for a11y, i18n, and SEO
  • Choosing the right libraries and learning resources

Advanced Redux

Leveraging Redux middleware and other tools to support complex flows. Understand the importance of best practices and good conventions.

  • Advanced middleware and action processing patterns and practices
  • State management: modeling, normalization, advanced selectors, and keeping it clean
  • Store and reducer enhancers, approaches to cleaner reducers

Custom Materials

We can customize course materials and build modules not represented in this syllabus based on specific needs of your company, product, or engineers.

Reach out
We reply within 24h

© 500Tech. Building high-quality software since 2012.