React and Redux – Hands-on Workshop for Web Development

React is one of the most popular and commonly used frontend frameworks. Developed and used by Facebook itself, it is a reliable and powerful tool for web application development. Whether it's a small single-page app (SPA) or a complex social network, React scales with the complexity of your application.

React has a modular structure and focuses on the essentials at its core: managing the application state and rendering components into the DOM with high performance. For almost all other problems, such as routing, you can find packages compatible with React. This way, you can create a customized solution that perfectly fits your requirements.

One of these additional packages is Redux, a state management library. It can be used as an alternative or in addition to React's state management. The architecture of Redux is simple and effective at the same time. Therefore, it is not only used in React but also in other frontend frameworks. So it's definitely worth taking a look at it.

There are also various approaches to styling with CSS. From CSS preprocessors such as LESS and SCSS, over CSS frameworks such as Bootstrap or Material Design, to design systems such as Storybook, you are spoiled for choice. We give an overview and look at the respective advantages and disadvantages.

The training is very practice-oriented. Over half of the workshop consists of applied exercises on a consistent topic. You will work through all aspects of React and Redux yourself using concrete tasks. For quality assurance, we look at both unit and integration testing using the testing frameworks Jest and Testing Library. The trainers will be at your side while you work on the tasks. After the workshop, your team will be able to apply the learned techniques directly in their daily work.

Contents

React

• What is the concept of React?
• What is JSX and how can we use it to create DOM elements?
• How to implement class-based and functional components?
• How do props and states of components differ from each other?
• What lifecycle methods are available and what are they used for?
• Why are hooks a functional alternative to lifecycle methods?
• How do I deal with events?
• What are established patterns and which typical mistakes should be avoided?

Testing

• How do unit and integration tests differ?
• What features does Jest offer me as a test runner and framework?
• How do I write parameterized tests?
• What are matchers and what do I use them for?
• What is the philosophy of the Testing Library?
• How do I render React components in test cases?
• What are queries and how do I use them to test the DOM?
• How can tests help me develop an accessible application?
• How do I simulate user input (events)?

Redux

• What is the architecture pattern of Redux and what advantages does it offer?
• What are stores, actions, dispatchers, and reducers?
• How do I integrate Redux into a React app?
• What are the capabilities of the Redux toolkit?
• How can I use Redux Thunk to implement side effects like user interactions or network communication?
• How do I test my state management?

Styling (CSS)

• What are approaches to styling my application?
• What are typical problems with CSS and what are the solutions?
• What are common CSS frameworks?
• How does a component-based approach help to keep track of larger web applications?
• When are more advanced approaches such as micro-frontends and design systems beneficial?

Target audience

• Software developers

Prerequisites

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

Further information

• After the workshop, you can optionally book one or more follow-up coaching days. The trainers will address the specific challenges you may face in applying the course content to your everyday work. In addition, you can deepen individual content in a targeted manner.