React.js & Redux

Introduction

• React overview

• JSX, React Dom & babel

• Project setup with create-react

React Components Foundations 1

• Structure

• The render method

• Class based components vs stateless function components

• Access props

• PropTypes

• Conditional

Implementing CSS with Styled Components

• Motivation

• Inline styling vs Styled Components

• Sass/Less vs Styled Components

• Basic Syntax and examples

• Passed props

• Extending styles

• Polished.js

• Hands on

React Components Foundations 2

• Managing state

• Handling events

• Using refs

• Rendering tree - Virtual dom diff algorithm behaviour

• Hands on exercise

Nested Components

• Parent / child relationship

• Unidirectional data flow

• Updating nested components

• Trigger re-render on a parent component

• 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

• Hands on exercises

Universal apps with Next.js

• Overview

• React seo considerations

• SPA vs SSR vs Universal apps vs Static sites

• Setting up a Next.js project

• Using React Components in Next.js

• Adding pages

• Routing with Next.js

• Related tools resources & references

• Future thoughts