What do web developers think of TypeScript

Web development with React and Typescript

React is an open source JavaScript library from Facebook that developers can use to create user interfaces in HTML. React on its own is only a small part of a complex single page application (SPA) and is often combined with other libraries such as Redux. Since 2019 the concept of "hooks" has been introduced as a further component of the React ecosystem, which enables a much more pleasant structuring and reusability of technical logic.

Getting started is relatively easy and enables even beginners to get quick results. For more complex applications, however, the selection and combination of the right packages and setting up an architecture are often very important. Often in direct comparison are Angular and Vue, which both focus on a more holistic approach of coordinated components, but sometimes also seem heavyweight as a result. React, on the other hand, is a very flexible Lego construction kit that can be put together individually.

In this workshop, we focus on the concepts and best practices of React, as well as special features of the architecture such as the unidirectional data flow and the virtual DOM. We use React in connection with TypeScript, as this combination has been successfully established for projects, especially in the enterprise area. The advantages are a significantly more maintenance-friendly code base and faster collaboration in the long term.

The workshop will be held online via video conference over 5 half days.

The practical collaboration takes place in the virtual classroom of Workshops.DE. You will receive the relevant access data in good time before the appointment.

Content

Javascript and JSX basics

  • ES2018 / ES2019 introduction
  • Scoping with var / let / const
  • Fat Arrow Functions
  • this in detail
  • Classes
  • Higher order functions
  • Promises (asynchrony)
  • Asynchronous error handling
  • Destructuring
  • TypeScript logo

TypeScript basics

We start with a short introduction to TypeScript (approx. 3 hours). There we learn the basics for the subsequent React part.

  • Differences to ES6
  • Fat Arrow
  • Types
  • Decorators / annotations
  • Module system
  • Interfaces
  • Generics
  • Compiler configuration
  • JSX

React Basics

What is React and how do I use it properly?

  • Components
  • Introduction to JSX / JSX pitfalls
  • Setup of applications with Create React App and Webpack
  • Props & States
  • Virtual DOM basics
  • Component lifecycle
  • Hooks in React
  • JSX

React in practice

We build a complete React application with build process, routing, forms and API access.

  • Query data via API from a backend
  • Overview of Flux, Redux, MobX
  • Deepening and applying Redux
  • Routing with the React Router
  • Form creation and validation
  • Universal React (render on the server side)
  • Best practices for performance and maintainability
  • Testing of components

KPIs

You will learn the basics of TypeScript and React using practical examples.

You know solutions and alternatives for various use cases, best practices, testing and maintainability.

requirements

Basic knowledge of the web, HTML and CSS is required to participate. You should also have a solid knowledge of at least one programming language.

The workshop will be held in German. The participants need their own PCs with the operating system of their choice.

Key data

Target group: software developers, software engineers | Duration: 5 half days | Trainer: Thomas Scharke | Online seminar | Number of participants: 6-12

If the workshop cannot be held due to illness, force majeure or insufficient number of participants, we will inform the participants as soon as possible. In this case, the ticket price will be refunded.