React and Redux – Hands-on Workshop for Web Development

A comprehensive training designed to introduce React, one of the most used front-end frameworks, and the Redux state management library

React is one of the most popular and commonly used front-end frameworks. Developed and used by Meta, it is a powerful tool for web application development. Whether building a small, single-page app (SPA) or a complex social network, React scales with the complexity of an application.

React has a modular structure and focuses on the essentials at its core: managing the application state and rendering components into the DOM. React-compatible packages are available for almost all other scenarios, such as routing, allowing users to create a customized solution that fits specific requirements.

One of these additional packages is Redux, a state management library. Redux can be used as an alternative or in addition to React\'s own state management. The architecture of Redux is simple and effective, allowing it to work in other front-end frameworks, as well.

This training is practice oriented. Over half of the training consists of applied exercises on a consistent topic, allowing learners to work through all aspects of React and Redux using concrete tasks. For quality assurance checks, both unit and integration testing are explored using the testing frameworks Jest and Testing Library. An overview of the various approaches to styling with CSS is also provided.

Contents

React

• React as a concept.
• JSX and how it can help create DOM elements.
• How to implement class-based and functional components.
• The difference between props and states of components.
• Lifecycle method availability and use.
• Hooks as a functional alternative to lifecycle methods.
• Managing events.
• Established patterns and typical mistakes to avoid.

Testing

• The difference between unit and integration tests.
• Features of Jest for test runner and framework.
• Writing parameterized tests.
• Understanding matchers and potential uses for them.
• The philosophy of the Testing Library.
• Render React components in test cases.
• Queries and using them to test the DOM.
• How tests help develop an accessible application.
• Simulating user input (events).

Redux

• The architecture pattern of Redux and the advantages it offers.
• Understanding stores, actions, dispatchers and reducers.
• Integrating Redux into a React app.
• The capabilities of the Redux toolkit.
• Using Redux Thunk to implement side effects like user interactions and network communication.
• Testing state management.

Styling (CSS)

• Approaches to styling an application.
• Typical problems with CSS and potential solutions.
• Common CSS frameworks.
• How a component-based approach helps keep track of larger web applications.
• The potential benefits of more advanced approaches, including micro-front-ends and design systems.

Following the workshop, coaching days are available. The trainer will focus on specific challenges a learner may face when implementing workshop content in everyday life.

Target audience

Software developers

Prerequisites

• Knowledge of software development.
• Basic understanding of JavaScript/TypeScript, HTML, and CSS.

Further information

All materials are offered digitally. Copies of any relevant standards must be provided by the learner.