Hooks-first Modern React Workshop

Struggling with web application complexity? Looking to break-free from your legacy spaghetti nightmare? Using or considering React for your next big project? Looking for a clean and elegant way to manage the state of your application? Used react before and want to catch-up with modern idioms?

If you want to learn about React and Redux - this workshop is for you!

Learn how to

  • Write robust, elegant, testable and maintainable code
  • Compose your UIs declaratively
  • Think about the state of your application
  • Appreciate immutability, pure functions and composability
  • Use hooks to manage component state, work with React context and perform side-effects
  • Make your application talk to the server and tame the complexity of asynchronous code
  • Leverage modern JavaScript features and tools to super-charge your development

Programme

React

  • The big picture
  • Declarative vs. Imperative programming
  • Components, Components, Components
  • Understanding React elements and JSX
  • Virtual DOM and reconciliation
  • Props as “inputs” to your components
  • Handling DOM events
  • Stateful components (useState & useReducer)
  • Side effects (useEffect)
  • Working with forms
  • State management strategies
  • Inter-component communication
  • Using React context (useContext)
  • Other hooks (useCallback, useMemo, useRef)
  • Encapsulating cross-cutting concerns and building reusable abstractions with custom hooks
  • Performance - memoization and pure components
  • Declarative routing using React Router
  • Best practices and common pitfalls
  • Tooling
  • Modern JavaScript features and best practices

Redux

  • Challenges of state management
  • Motivation
  • Unidirectional data flow
  • Using Redux store to encapsulate and manage application state
  • Describe state changes with reducers
  • Combining reducers using divide-and-conquer approach
  • Actions and action creators
  • Encapsulate store usage with Provider/connect
  • Perform asynchronous operations
  • Using thunk middleware

Audience

If you are an experienced Web Developer and you want to learn how to design, create and maintain complex and modern rich web applications using React & Redux, this is the course for you!

Prerequisites

This is an introductory React/Redux course but in order for you to benefit from it, you should have some experience using JavaScript and be familiar with HTML, DOM and CSS.

Prior exposure to a JavaScript framework/library is be helpful but is not essential.

Labs & Exercises

This workshop is a combination of lectures, discussions and practical exercises.

Installation Guide

  • Workstations with internet access
  • Git client
  • NodeJS 14
  • Google Chrome (or any other modern web browser)
  • Visual Studio Code (or any other text-editor/IDE)

This is a BYOD (bring your own device) workshop.