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

Customized Onsite Training

5
Days
  • Customized Content
  • For Groups of 5+
  • Online or On-location
  • Expert Instructors

Live Online Training

$2,625.00
or 5 vouchers
  • Live Online Training
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

Upcoming Classes

  • See More Classes

Please select a class.
Overview

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.

Goals
  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’s components.
  9. Use Redux for maintaining state in a React.js application.
  10. Learn React.js best practices.
Outline
  1. Introduction
    1. Daily Schedule
    2. The Big Picture
    3. Professional Front-End Development
    4. What is ES6?
    5. What is React.js?
    6. What is React NOT?
    7. When can you use React?
    8. Who Uses React?
    9. Course Schedule (approx.)
  2. Development Ecosystem
    1. Code Editors and IDEs
    2. Installing and Configuring WebStorm IDE
    3. Node.js
      1. What is Node.js?
      2. A Simple Node.js Example
      3. EventEmitter
      4. Node Streams
      5. Using Readable Streams
      6. Using Writable Streams
      7. Front-end Node
      8. Getting Started with Node.js
    4. Git
      1. What is Version Control?
      2. History of Git
      3. What is Git?
      4. 3 States of Git
      5. Git Workflow
      6. Version Control With Git
    5. Command Prompt
      1. Know Your Shell
  3. Reproducible Builds
    1. Why Automate Your Build?
    2. Build Requirements
    3. npm
      1. Initialize npm
      2. node_modules
      3. package.json
      4. Npm Install
    4. Task Runners
      1. Gulp
      2. Set Up a Task Runner
      3. gulpfile.js
      4. Gulp API
      5. gulp.task
      6. gulp.src
      7. gulp.dest
      8. gulp.watch
      9. Run Gulp
    5. Managing External Dependencies
  4. Static Code Analysis
    1. Lint tools
      1. Automate Linting
      2. Configuring JSHint
      3. Recommended JSHint Options
      4. Configuring ESLint
      5. ESLint: What Can Be Configured?
      6. ESLint Rules
    2. Configure a Local Web Server
    3. Browser Development Tools
  5. Test-Driven Development
    1. TDD Steps
    2. Assertions
    3. JS Exception Handling
    4. Jasmine Overview
    5. How Jasmine Works
    6. Test Suites
    7. Specs
    8. Expectations
    9. Matchers
    10. TDD vs. BDD
    11. TDD Example
    12. BDD Example
    13. Get Started with Jasmine
    14. Integrate Testing into Your Build
    15. Automated Cross-browser Testing
    16. Karma
    17. In-browser Testing with Karma
  6. Modularity
    1. Why is Modularity Important?
    2. CommonJS
    3. RequireJS
    4. ES6 Modules
    5. Front-end Modules
    6. Manage Modules Manually
    7. Front End Package Management with npm
  7. Building and Refactoring
    1. Building the dist directory
    2. webpack
    3. How webpack Works
    4. Deploying with Webpack
    5. README Update and Refactoring
  8. ES2015 (ES6)
    1. "use strict"
    2. Variable Scoping with const and let
    3. let vs. var
    4. Block-scoped Functions
    5. Arrow Functions
    6. Default Parameter Handling
    7. Rest Parameter
    8. Spread Operator
    9. Template Literals
    10. Enhanced Object Properties
    11. Array Matching
    12. Object Matching
    13. Symbol Primitive
    14. User-defined Iterators
    15. For-Of Operator
    16. Creating and Consuming Generator Functions
    17. Class Definition
    18. Class Declaration
    19. Class Expressions
    20. Class Inheritance
    21. Understanding this
      1. 4 Rules of this
      2. What is this?
    22. Implicit Binding
    23. Explicit Binding
      1. Explicit Binding with .call
      2. Explicit binding with .apply
      3. Explicit Binding with .bind
    24. new Binding
    25. window Binding
    26. reduce()
    27. Promises
    28. Babel
    29. Transpiling with Babel
    30. Converting to ES6
  9. The Document Object Model
    1. What is the DOM?
    2. Understanding Nodes
    3. EventTarget
    4. DOM Events
    5. Other Events
    6. Element
    7. Manipulating HTML with the DOM
    8. Manipulating HTML with the DOM
    9. Manipulating HTML with JQuery
    10. Manipulating HTML with React
  10. Introduction to React.js
    1. What is React.js?
    2. Imperative API vs. Declarative API
    3. Imperative vs. Declarative Screen Updates
    4. Key Points
    5. One-way Data Flow
    6. Props vs. State
    7. Changing Props and State
    8. Setting Initial State
    9. Virtual DOM
    10. Virtual DOM vs. HTML DOM
    11. State Machines
    12. Understanding Components
    13. React.render()
    14. ReactDOM
    15. ReactDOM.findDOMNode
    16. ReactDOM.unmountComponentAtNode
    17. ReactDOM.render
    18. React Development Process
    19. Hello React!
  11. JSX
    1. What is JSX?
    2. Using JSX
    3. JSX is not exactly HTML
    4. Using React with JSX
    5. Using React without JSX
    6. Expressions in JSX
    7. Expressions in JSX
    8. Precompiled JSX
    9. HTML to JSX
  12. React Components
    1. Creating Components
      1. React.createClass
      2. React.Component
      3. React.createElement
    2. Namespaced Components
    3. Pure Functions
      1. Benefits of Pure Functions
      2. F.R.S.T.
      3. Single Responsibility
      4. Function Comparison
    4. this.props.children
    5. Passing Props
    6. Styles in React
    7. Style in React
    8. Forms
      1. Forms Have State
      2. Form Events
      3. Controlled Components
      4. Uncontrolled Components
    9. Controlling the Form
    10. Stateless Functional Components
    11. Refactoring the App
    12. Component Life-Cycle Events
      1. Life-Cycle Methods
      2. Mount/Unmount
      3. Mount/Unmount Life-Cycle Methods
      4. Data Life-Cycle Methods
    13. Events
    14. Life Cycle and Events
    15. Presentational Components
    16. Container Components
    17. Composition
    18. PropTypes
    19. PropTypes
    20. Communication Between Components
    21. Ref Functions
    22. Reusable Components
    23. Testing React Components
      1. Jest
    24. Testing React Components
    25. Multiple Components
    26. React Router
    27. React Router
  13. Flux and Redux
    1. Flux
      1. Flux Flow
      2. Flux Action
      3. Flux Dispatcher
      4. Flux Stores
      5. EventEmitter
    2. Redux
      1. Stores & Immutable State Tree
      2. Redux Actions
      3. Implementing Redux
      4. Pure Functions
      5. Reducers
      6. Things You Should Never do in a Reducer
      7. Reducer Composition
      8. Reducer Composition Example
      9. Reducer Composition Example (cont)
      10. Redux Store
      11. Redux with Ajax
      12. Redux Pros and Cons
      13. Redux Thermometer
    3. Relay and GraphQL
      1. What is Relay?
      2. GraphQL
      3. GraphQL Example
      4. Relay Pros and Cons
  14. Advanced Topics
    1. Server-side React
    2. Using React with Other Libraries
    3. Performance Optimization
    4. Development vs. Production
    5. Perf Object
    6. Perf Object Methods
    7. Optimization Techniques
    8. Using Pre-built Components
  15. Further Study
  16. Where to go for help?
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 JavaScript 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

74,839

Students who have taken Live Online Training

15,233

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.41

Students rated our trainers 9.41 out of 10 based on 5,189 reviews

Contact Us or call 1-877-932-8228