Course Overview

In this 5-day course, attendees will gain hands-on experience with some of the most current tools, techniques, and technologies in front end Web development. Test-driven Development (TDD) Using React and ES6 is a complete introduction to modern front-end development. It covers the syntax, conventions, and best practices of modern JavaScript development while also teaching React. In the process, students learn about TDD and, specifically, how to test React and Redux applications using the Jest testing framework as they build a complete React/Redux application.

Key Learning Areas

  • Learn how to Install, configure and use modern web tooling
  • Understand Test-Driven Development
  • Learn to create test suites using Jasmine
  • Write ES6 code and compile it using Babel
  • Understand what React.js is and what problem it solves
  • Explore the basic architecture of a React.js application
  • Gain a deep knowledge of React.js components and JSX
  • Build a working application that uses React.js’s components
  • Use Redux for maintaining state in a React.js application
  • Learn React.js best practices

Course Outline

Development Ecosystem

  • Code Editors and IDEs
  • Lab - Installing and Configuring WebStorm IDE
  • js
  • Lab - Getting Started with Node.js
  • Git
  • Lab - Version Control with Git
  • Know Your Shell

Reproducible Builds

  • Why Automate Your Build?
  • npm
  • Lab – Initialize npm
  • Task Runners
  • Gulp
  • Lab - Set Up a Task Runner
  • Lab - Managing External Dependencies

Static Code Analysis

  • Lint tools
  • Lab - Automate Linting
  • Configuring ESLint
  • Lab - Configure a Local Web Server

Test-Driven Development

  • JavaScript Testing Frameworks
  • Jasmine Overview
  • TDD vs. BDD
  • Lab – Get Started with Jasmine
  • Lab - Integrate Testing into Your Build
  • Lab - TDD Practice
  • Automated Cross-browser Testing
  • Lab - In-browser Testing with Karma

Modularity

  • CommonJS
  • RequireJS
  • ES6 Modules

Building and Refactoring

  • webpack
  • Lab - Deploying with Webpack

ES2015 (ES6)

  • Variable Scoping with const and let
  • Block-scoped Functions
  • Arrow Functions
  • Default Parameter Handling
  • Rest Parameter
  • Spread Operator
  • Template Literals
  • Enhanced Object Properties
  • Array Matching
  • Object Matching
  • For-Of Operator
  • Creating and Consuming Generator Functions
  • Class Definition
  • Advanced JavaScript Topics
  • Understanding this
  • 4 Rules of this
  • Implicit Binding
  • Explicit Binding
  • new Binding
  • window Binding
  • map()
  • Promises
  • Babel
  • Lab - Transpiling with Babel
  • Lab - Converting to ES6

The Document Object Model

  • EventTarget
  • DOM Events
  • Manipulating HTML with the DOM
  • Manipulating HTML with JQuery
  • Manipulating HTML with React

Introduction to React.js

  • Imperative API vs. Declarative API
  • One-way Data Flow
  • Props vs. State
  • Virtual DOM
  • Understanding Components
  • ReactDOM
  • React Development Process
  • Lab - Hello React!

JSX

  • What is JSX?
  • Using JSX
  • Lab - HTML to JSX

React Components

  • Creating Components
  • Pure Functions
  • Lab - Passing Props
  • Styles in React
  • Lab - Style in React
  • Forms
  • Controlled Components
  • Uncontrolled Components
  • Lab - Controlling the Form
  • Stateless Functional Components
  • Lab - Refactoring the App
  • Component Life-Cycle Events
  • Life-Cycle Methods
  • Lab - Life Cycle and Events
  • Composition
  • Lab - PropTypes
  • Communication Between Components
  • Testing React Components
  • Jest
  • TestUtils
  • Enzyme
  • Lab - Testing React Components
  • Lab - Testing with Jest and Enzyme
  • Lab - Multiple Components
  • React Router
  • Lab - React Router
  • Lab - React Router, Part 2

Flux and Redux

  • Flux
  • Redux
  • Stores & Immutable State Tree
  • Redux Actions
  • Reducers
  • Reducer Composition
  • Lab - Redux Thermometer
  • Lab - Implementing Redux
  • React AJAX Best Practices
  • Redux with Ajax
  • Lab - SwimCalc App
  • Lab - Redux Async Actions
  • create-react-app
  • Lab - create-react-app and enyzme

Advanced Topics

  • Relay and GraphQL
  • Server-side React
  • Using React with Other Libraries
  • Performance Optimization
  • Perf Object

Further Study

Who Benefits

This course is ideal for experienced software developers who are new to JavaScript and TDD, or for JavaScript developers who may be new to ES6+, TDD, and React.

Prerequisites

Attendees should have at least a beginning to intermediate level of knowledge with JavaScript. Specifically, they should be comfortable working with JavaScript functions and objects.

The courseware includes slides, notes, assignments, a pre/post assessment test, and complete source code for all assignments.