React.js & Redux

FT100


3 Days

Download Full Syllabus Request a Quote
All Our Courses Now Also LIVE

Course Outline

React is a JavaScript library for building user interfaces. It simplifies complex arbitrary DOM manipulations by using a "virtual DOM" and a diff engine, allowing you to easily transition your DOM into any arbitrary state, regardless of the current state. React implements one-way reactive data flow, which reduces boilerplate and is easier to reason about than traditional data binding. Redux takes care of application architecture implementing Flux – a pattern Facebook

uses for building client-side web applications. It complements React's view components by utilizing a unidirectional data flow and managing the state of your application. Learning React and Redux will put you at the very front of modern web development industry, especially with the release of React-Native. This course will get you up and running with the essentials of React components, and creating systems architectures with Redux. You will be able to build scalable apps that run in a browser and then leverage this knowledge to build native Mobile or desktop apps. Whether you are new to react, or if you have started learning it already and need a thorough understanding of React.js & Redux - this course is the leap forward you are after.

Upcoming Meetings

Modules

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

Prerequisites

  • Good working knowledge and experience with HTML, CSS and JavaScript

Upcoming Meetings

Redux takes care of application architecture implementing Flux – a pattern Facebook uses for building client-side web applications."
Download Full Syllabus

Target Audience