Front-end Development with React.js

Front-end Development with React.js 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.

Categories: , Tags: , ,

Description

In this 5-day course, students will gain hands-on experience with some of the most current tools, techniques, and technologies in front end Web development.

Front-end Development with React.js 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.

TARGET AUDIENCE

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.

PRICING

This course is available for lease on a per seat / per day rate by trainers and training companies. The courseware includes slides, notes, assignments, and complete source code for all assignments.

We can also provide full-service training in addition to courseware. Contact us for details.

Complete Front-end Development with React.js Training Objectives

All students will:

  • 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

OUTLINE

  1. Chapter 1: Development Ecosystem
    1. Code Editors and IDEs
    2. Lab 1: Installing and Configuring VS Code
    3. js
    4. Lab 2 – Getting Started with Node.js
    5. Git
    6. Lab 3 – Version Control With Git
    7. Know Your Shell
  2. Chapter 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. Chapter 3: Static Code Analysis
    1. Lint tools
    2. Lab 7 – Automate Linting
    3. Configuring ESLint
    4. Lab 8 – Configure a Local Web Server
  4. Chapter 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. Chapter 5: Modularity
    1. CommonJS
    2. RequireJS
    3. ES6 Modules
  6. Chapter 6: Building and Refactoring
    1. webpack
    2. Lab 12: Deploying with Webpack
  7. Chapter 7: Modern JavaScript
    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. map()
    22. Promises
    23. Babel
    24. Lab 14: Transpiling with Babel
    25. Lab 15: Converting to ES6
  8. Chapter 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. Chapter 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. Chapter 10: JSX
    1. What is JSX?
    2. Using JSX
    3. Lab 17 – HTML to JSX
  11. Chapter 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. Chapter 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. Chapter 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
Front-end Development with React.js

Related products