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
- Chapter 1: Development Ecosystem
- Code Editors and IDEs
- Lab 1: Installing and Configuring VS Code
- js
- Lab 2 – Getting Started with Node.js
- Git
- Lab 3 – Version Control With Git
- Know Your Shell
- Chapter 2: Reproducible Builds
- Why Automate Your Build?
- npm
- Lab 4 – Initialize npm
- Task Runners
- Gulp
- Lab 5 – Set Up a Task Runner
- Lab 6 – Managing External Dependencies
- Chapter 3: Static Code Analysis
- Lint tools
- Lab 7 – Automate Linting
- Configuring ESLint
- Lab 8 – Configure a Local Web Server
- Chapter 4: Test-Driven Development
- JavaScript Testing Frameworks
- Jasmine Overview
- TDD vs. BDD
- Lab 9 – Get Started with Jasmine
- Lab 10 – Integrate Testing into Your Build
- Lab 10.5 – TDD Practice
- Automated Cross-browser Testing
- Lab 11 – In-browser Testing with Karma
- Chapter 5: Modularity
- CommonJS
- RequireJS
- ES6 Modules
- Chapter 6: Building and Refactoring
- webpack
- Lab 12: Deploying with Webpack
- Chapter 7: Modern JavaScript
- 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 14: Transpiling with Babel
- Lab 15: Converting to ES6
- Chapter 8: The Document Object Model
- EventTarget
- DOM Events
- Manipulating HTML with the DOM
- Manipulating HTML with JQuery
- Manipulating HTML with React
- Chapter 9: 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 16: Hello React!
- Chapter 10: JSX
- What is JSX?
- Using JSX
- Lab 17 – HTML to JSX
- Chapter 11: React Components
- Creating Components
- Pure Functions
- Lab 18: Passing Props
- Styles in React
- Lab 19: Style in React
- Forms
- Controlled Components
- Uncontrolled Components
- Lab 20: Controlling the Form
- Stateless Functional Components
- Lab 21: Refactoring the App
- Component Life-Cycle Events
- Life-Cycle Methods
- Lab 22: Life Cycle and Events
- Composition
- Lab 23: PropTypes
- Communication Between Components
- Testing React Components
- Jest
- TestUtils
- Enzyme
- Lab 24: Testing React Components
- Lab 24.5: Testing with Jest and Enzyme
- Lab 25: Multiple Components
- React Router
- Lab 26: React Router
- Lab 27: React Router, Part 2
- Chapter 12: Flux and Redux
- Flux
- Redux
- Stores & Immutable State Tree
- Redux Actions
- Reducers
- Reducer Composition
- Lab 28: Redux Thermometer
- Lab 29: Implementing Redux
- React AJAX Best Practices
- Redux with Ajax
- Lab 30: SwimCalc App
- Lab 31: Redux Async Actions
- create-react-app
- Lab 32: create-react-app and enyzme
- Chapter 13: Advanced Topics
- Relay and GraphQL
- Server-side React
- Using React with Other Libraries
- Performance Optimization
- Perf Object
- Further Study