Example repo for React workshop
Topic | Description |
---|---|
Introduction | Geschichte und Einführung in React |
React vs Angular vs Vue.js vs other MVC frameworks | Vergleich von Popularität, Leistung und DX |
Design Principles behind React | Kernideen von React |
Understanding the DOM | Kurzer Überblick |
How Components Work in React | Kurzer Überblick |
The Component Life Cycle | Life-Cycle Methoden |
Overview of JSX Syntax | JSX vs. Plain HTML5 |
Setting up Your Development Environment | Git, NodeJS, Web IDEs, VSCode, WebStorm |
Rendering an Element | Kurzes Beispiel |
Building Your First Component | Weiteres Beispiel |
Handling State in React | Class based components vs functional components |
Defining Your Components' Parent/Child Relationships | View hierarchy |
Event Handling and Conditional Rendering | Codebeispiele |
Kurze Erklärung | Implementing Forms and Processing User Input |
Codebeispiele | Integrating React with Other Frameworks and Plugins |
Material UI, Vite, yarn | (Preparing the Development Environment) |
Hooks | useEffect, useState, Context-API, External hooks, custom Hooks, Reducer hook, Advanced Hooks |
React in TypeScript | |
Redux | Kurze Übersicht & Geschichte |
Managing State with Redux | Codebeispiele |
Understanding Middleware Functions | Kurzer Überblick & Codebeispiele |
Handling Asynchronous Actions with Redux Middleware | Kurzer Überblick & Codebeispiele |
Authentication | Client Side & Server Side |
Testing and Debugging | Kurzer Überblick, React Dev-Tools, Redux Dev- Tools |
Testing React components | Jest, Enzyme, React Testing Library |
Logging User Actions and Reporting Errors | New Relic, DataDog, Sentry, Rollbar |
Optimizing performance | SSR, SSG, Memoization, |
Memoization for performance optimization | Codebeispiele |
Measuring render timesUsing | Codebeispiele |
Higher-order components | Kurzer Überblick & Codebeispiele |
Deployment | Netlify, Buddy + FTP |
Troubleshooting | React 18.x, ... |