overview

This training consists of:

• Part 1: an introductory 3-hour course on React using the create-react-app tool geared for JavaScript developers who have a good understanding of basic ES6 features. The course starts with a few slides and then dives into a live coding tutorial that learners can work through in sync with the instructor.

• Part 2: a 2-hour introduction on Redux using the React application that was built in Part 1 for JavaScript developers who understand the basics of ES6 and React and would like to learn state management with Redux. This part also uses live coding, and by its end, learners will have a working React + Redux application.

• Part 3: advanced topics that may be included based on learners' prior experience with JavaScript, React, and Redux.

Each part culminates in a fully functioning application, and while the second uses the code built in the first, it can be used independently. As well as React and Redux, learners will learn best practices for building fast, scalable code.

Prerequisits

• NPM and Node v6+ http://nodejs.org/download/

• A code editor

• A basic understanding of JavaScript ES6, including:

  • Built-in data types, loops, conditionals, and functions

  • Modules

  • Functional programming with Array.map, Array.filter, etc.

  • Classes

  • Default parameters for functions

  • Template literals (back-quoted strings)

  • Destructuring assignment

  • "Fat arrow" functions

  • Promises

Syllabus

• Part 1: React

  • Leveraging create-react-app to create a new application

  • Using JSX

  • Properties and state

  • Using PropTypes to statically check code

  • Component lifecycle methods

  • Stateless and stateful components

  • Styling components

  • Routing

  • Handling asynchronous data operations

• Part 2: Redux

  • The problem of global state

  • Using transformations on immutable state

  • Action creators

  • Reducers

  • Making containers Redux-aware

  • Using constants for action names

• Part 3: Advanced Topics

  • Jest/Enzyme testing

  • Immutable.js

  • Selectors

  • Sagas

  • Performance

  • Scaling