Test-Driven Development (TDD) Using React.js and ES6

  4.4 out of 5 - Read Testimonials

See Course Outline

Training for your Team

  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

Training for Yourself

or 5 vouchers
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

In this 5-day Test-Driven Development Using React.js and ES6 training class, students will gain hands-on experience with some of the most current tools, techniques, and technologies in front-end web development.

React.js is a popular, high-performance JavaScript library for building rapidly responsive user interfaces. ECMAScript 6 (aka ES2015) is the latest version of JavaScript, which includes support for classes and modules.

React is more than just a library for building user interfaces; it's really a new way to think about building web applications. Once you understand the principles of it, it's actually surprisingly simple. One of the great things about react, and about ES6 too, is that you don't have to buy into it completely. You can start out using it pretty quickly by integrating it with your existing code, and then you can do more with it as you become more proficient. React's architecture makes it easy to reason about and easy to gradually refactor.

Test-Driven Development Using React.js and ES2015 teaches experienced JavaScript developers the skills they need to immediately implement React.js in their applications using professional test-driven development tools and methodologies.

  1. Learn how to install, configure and use modern web tooling.
  2. Understand test-driven development.
  3. Learn to create test suites using Jasmine.
  4. Write ES6 code and compile it using Babel.
  5. Understand what React.js is and what problem it solves.
  6. Explore the basic architecture of a React.js application.
  7. Gain a deep knowledge of React.js components and JSX.
  8. Build a working application that uses React.js components.
  9. Use Redux for maintaining state in a React.js application.
  10. Learn React.js best practices.
  1. Development Ecosystem
    1. Code Editors and IDEs
    2. Lab 1: Installing and Configuring WebStorm IDE
    3. Node.js
    4. Lab 2 - Getting Started with Node.js
    5. Git
    6. Lab 3 - Version Control With Git
    7. Know Your Shell
  2. Reproducible Builds
    1. Why Automate Your Build?
    2. npm
    3. Lab 4 – Initialize npm
    4. Task Runners
    5. Gulp
    6. Lab 5 - Set Up a Task Runner
    7. Lab 6 - Managing External Dependencies
  3. Static Code Analysis
    1. Lint tools
    2. Lab 7 - Automate Linting
    3. Configuring ESLint
    4. Lab 8 - Configure a Local Web Server
  4. Test-Driven Development
    1. JavaScript Testing Frameworks
    2. Jasmine Overview
    3. TDD vs. BDD
    4. Lab 9 – Get Started with Jasmine
    5. Lab 10 - Integrate Testing into Your Build
    6. Lab 10.5 - TDD Practice
    7. Automated Cross-browser Testing
    8. Lab 11 - In-browser Testing with Karma
  5. Modularity
    1. CommonJS
    2. RequireJS
    3. ES6 Modules
  6. Building and Refactoring
    1. webpack
    2. Lab 12: Deploying with Webpack
  7. ES2015 (ES6)
    1. Variable Scoping with const and let
    2. Block-scoped Functions
    3. Arrow Functions
    4. Default Parameter Handling
    5. Rest Parameter
    6. Spread Operator
    7. Template Literals
    8. Enhanced Object Properties
    9. Array Matching
    10. Object Matching
    11. For-Of Operator
    12. Creating and Consuming Generator Functions
    13. Class Definition
    14. Advanced JavaScript Topics
    15. Understanding this
    16. 4 Rules of this
    17. Implicit Binding
    18. Explicit Binding
    19. new Binding
    20. window Binding
    21. Array.map()
    22. Promises
    23. Babel
    24. Lab 14: Transpiling with Babel
    25. Lab 15: Converting to ES6
  8. The Document Object Model
    1. EventTarget
    2. DOM Events
    3. Manipulating HTML with the DOM
    4. Manipulating HTML with JQuery
    5. Manipulating HTML with React
  9. Introduction to React.js
    1. Imperative API vs. Declarative API
    2. One-way Data Flow
    3. Props vs. State
    4. Virtual DOM
    5. Understanding Components
    6. ReactDOM
    7. React Development Process
    8. Lab 16: Hello React!
  10. JSX
    1. What is JSX?
    2. Using JSX
    3. Lab 17 - HTML to JSX
  11. React Components
    1. Creating Components
    2. Pure Functions
    3. Lab 18: Passing Props
    4. Styles in React
    5. Lab 19: Style in React
    6. Forms
    7. Controlled Components
    8. Uncontrolled Components
    9. Lab 20: Controlling the Form
    10. Stateless Functional Components
    11. Lab 21: Refactoring the App
    12. Component Life-Cycle Events
    13. Life-Cycle Methods
    14. Lab 22: Life Cycle and Events
    15. Composition
    16. Lab 23: PropTypes
    17. Communication Between Components
    18. Testing React Components
    19. Jest
    20. TestUtils
    21. Enzyme
    22. Lab 24: Testing React Components
    23. Lab 24.5: Testing with Jest and Enzyme
    24. Lab 25: Multiple Components
    25. React Router
    26. Lab 26: React Router
    27. Lab 27: React Router, Part 2
  12. Flux and Redux
    1. Flux
    2. Redux
    3. Stores & Immutable State Tree
    4. Redux Actions
    5. Reducers
    6. Reducer Composition
    7. Lab 28: Redux Thermometer
    8. Lab 29: Implementing Redux
    9. React AJAX Best Practices
    10. Redux with Ajax
    11. Lab 30: SwimCalc App
    12. Lab 31: Redux Async Actions
    13. create-react-app
    14. Lab 32: create-react-app and enyzme
  13. Advanced Topics
    1. Relay and GraphQL
    2. Server-side React
    3. Using React with Other Libraries
    4. Performance Optimization
    5. Perf Object
  14. Further Study
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this React class:

  • HTML and CSS
  • Some JavaScript experience
  • Familiarity with intermediate-to-advanced JavaScript programming topics, including objects, functions, closures, callbacks, prototypes and object-oriented JavaScript
Prerequisite Courses

Courses that can help you meet these prerequisites:

Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing


Students who have taken Live Online Training


Organizations who trust Webucator for their training needs


Satisfaction guarantee and retake option


Students rated our Test-Driven Development (TDD) Using React.js and ES6 trainers 8.89 out of 10 based on 5 reviews

One of the most effective trainings I've attended. I was sceptical at first because of the online format. I was amazed at the results. I will attend more Webucator classes in the future! Thanks.

Sebastien Dubois, Bell Mobility
Dorval QC

I feel like I learned everything I needed to about QuarkXPress, plus some extras, in an Introductory course.

Brooke Walthall, Direct Solutions International Inc.
Dallas TX

I knew some PowerPoint, but I needed a lot of "fill in the gap" type info, so this was perfect. I also liked that the instructor included some of his own helpful "shortcuts" for the class to use.

Julie Tuggle, Carolina Buyer's Agent
Charlotte NC

I needed to increase my skillset and needed to take a course as soon as possible. Being in New Zealand, courses were run too far in the future, so it was great taking part in an online course (be it starting 4am NZST time) and getting through the material in 3 days. Great Work!

Pey Geldenhuys, Abel Solutions

Contact Us or call 1-877-932-8228