React.js, Redux & Router (hands-on training)

About this course

Do you want to write interactive applications in HTML and JavaScript?

Or are you already writing SPAs, but is the HTML 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?

Let's React!

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

In this course you'll learn all about React and its ecosystem. Redux and React Router are covered extensively. EcmaScript 2018, npm, Babel and Webpack will be used throughout the course.

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, JavaScript and CSS programming.

Length

4 days, workshop format, instructor-led course using slides, labs & more than 100 examples.

Instructor

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

Contact

Course details

Introduction

• What is React?
• Why React?

Module 1: Language constructs for React & Redux

• EcmaScript 2015 and later (JavaScript)
• JSX
• Babel transpiler
• Optional: TypeScript

Module 2: Basic

• Root
• Render
• Fragments (React 16+)
• Properties
• Databinding

Module 3: Interactivity

• Events
• State: Initialising
• State: Change sync vs async

Module 4: Building Apps

• Function vs Class components, single responsibility
• Multiple components
• Children
• Error Boundaries (React 16+)
• Reusable components (prop-types / typescript)

Module 5: Component Life

• Component lifecycle (React 16+)
• Fetch server data
• Suspence, Resource, react-cache and scheduler (React 17+)
• Component lifecycle (React 15-)

Module 6: Developer experience

• Debugging
• Developer tools
• Unit testing
• Snapshot testing
• Updating to new React versions
• Optional: Storybook (Component development)

Module 7: Good to know

• Forms
• DOM interactions
• Portals (React 16+)
• Wrapping existing components

Module 8: Setting up a project

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

Module 9: Redux Basics

• Redux Basics
• Redux Dev Tools

Module 10: React patterns (partly used by Redux)

• Pattern: Destructing props and state
• Pattern: Higher Order Components
• Pattern: Render Props
• Pattern: Transclusion
• Context (Pattern: Implicit state)

Module 11: Redux and React

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

Module 12: Router

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

Module 13: Performance

• shouldComponentUpdate() lifecycle method
• MemoComponent (f.k.a. PureComponent)
• memo() Higher-Order Component (React 17+)
• Event Handlers: inline vs method
• React Profiler

Module 14: New & Future

• Lazy (React 17+)
• ... (Latest and greatest)

Appendix

Appendix 1: Immutable Data

• Immutable JavaScript:
  • List
  • Map
  • Set
  • Convert from and to raw JavaScript objects
  • Nested structures
  • Lazy sequences
  • Equality; Batch mutations

Appendix 2: Other React targets

• React Native: Shared components
• React Native: Shared code vs platform specific code
• React 360 / VR
• Other React targets

Appendix 3: Styling

• Animations
• CSS, Inline styles
• Optional: Styled Components

Appendix 4: Server side rendering (universal/isomorphic applications)

• Search Engine Optimization (SEO)
• ReactJS.NET