React Essentials & Advanced

React.js Introduction

• React overview

• JSX, React DOM & babel

• Project setup with create-react-app

React Components Basics 1

• Structure

• The render method

• Class based components

• Function components

• Props

• PropTypes

• 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

• Polished.js

• Hands on exercises

React Components Basics 2

• Managing component state in class components

• Managing component state in Function components

• Handling events

• Using refs

• Rendering tree - Virtual dom diff algorithm behaviour

• Hands on exercise

Component Lifecycle

• Overview

• Mounting and unmounting components

• Updating props

• Other phases usage\

• Hands on exercise - porting an external lib using lifecycle methods

• Class components lifecycle methods

• Related React Hooks in Function components

Lifting up state

• Parent / child relationship

• Unidirectional data flow

• Updating nested components

• Rendering Collections and lists

• Hands on exercises - filtering lists and master details

The Redux Architecture

• Flux overview

• Redux overview

• App state mutation

• Store api

• Reducers & Pure functions

• Views

• Actions

• Fetching remote data

• Testing Redux elements

• Using Middleware

• Lots of best-practices structure & insights

• Hands on exercises

Routing with React Router 5

• 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

Performance tips & best practices