React Essentials & Advanced

React.js Introduction

• React overview

• JSX, React DOM & vite

• Project setup with pnpm create vite

React Components Basics 1

• Structure

• The render method

• Function components

• Props

• Conditional rendering

• Hands on exercise

Implementing CSS with Styled Components

• Motivation

• Inline styling vs global styles vs css-in-js

• Sass/Less vs Styled Components

• Basic Syntax and examples

• Styling props

• Extending styles

• Hands on exercises

React Components Basics 2

• Managing component state in Function components

• Handling events

• Rendering tree Virtual dom diff algorithm behaviour

• Hands on exercise

Use Effect Component Lifecycle

• Overview

• Mounting and unmounting components

• Updating props

• Other phases usage

• Hands on exercise porting an external lib using lifecycle methods

Lifting up state

• Parent / child relationship

• Unidirectional data flow

• Updating nested components

• Rendering Collections and lists

• Hands on exercises - filtering lists and master details

Routing with React Router 6

• Overview

• Routing Basics

• Router, Route & Link

• Histories

• Redirects

• Route parameters

• Query String Parameters

Unit Testing with Jest

• TDD intro

• Unit testing tools overview – test runners, assertion libraries & utilities

• Jest features

• Installation & setup

• Matchers API

• Async tests

• Mocking

• Code coverage