Test-Driven Development with React
In this 5-day Test-Driven Development (TDD) 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.
This Test-driven Development (TDD) Using React and ES6 training class 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.
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+ and TDD.
- Learn how to install, configure and use modern web tooling.
- Understand test-driven development.
- 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 components.
- Use Redux for maintaining state in a React.js application.
- Learn React.js best practices.
- Day 1: Modern Javascript
- Variable Scoping with const and let
- let vs. var
- Block-scoped Functions
- Arrow Functions
- Default Parameter Handling
- Rest Parameter
- Spread Operator
- Template Literals
- Array Matching
- Object Matching
- User-defined Iterators
- For-Of Operator
- Classes
- Class Inheritance
- Advanced JavaScript Topics
- “use strict”
- Understanding this
- 4 Rules of this
- What is this?
- Implicit Binding
- Explicit Binding
- new Binding
- window Binding
- Array.map()
- Promises
- Promises vs. Event Listeners
- Why use Promises?
- Demo: Callback vs. Promise
- ES6 Modules
- Day 2: NPM, Node.js, tooling and debugging
- NPM:
- Front End Package Management with npm
- Managing External Dependencies
- node_modules
- Semantic versioning and package.json
- npm install
- Node.js:
- What is Node.js?
- Node modules
- Writing a simple server-side app with Node.js
- Builds and tooling:
- Intro to Webpack
- Npm scripts
- ESLint
- Browser dev tools
- Debugging Javascript in the browser
- NPM:
- Day 3: TypeScript + intro to React and JSX
- TypeScript
- Using the TSC compiler
- Basic types
- Usefulness of types
- Interfaces, classes and object inheritance
- Getters, setters and static properties
- Constructor syntax
- Generics and advanced types
- Introduction to React and JSX
- What is React.js
- Virtual DOM
- React.render()
- JSX
- JSX is not Exactly HTML
- Expressions in JSX
- TypeScript
- Day 4: Fundamentals of React
- Creating Components
- Pure Functions
- Benefits of Pure Functions
- Communication Between Components
- Props
- Ref Callback
- Styles in React
- Forms
- Controlled Components
- Uncontrolled Components
- React State
- Component Life-Cycle Events
- Life-Cycle Methods
- Mount/Unmount
- React Hooks
- Day 5: React architecture, Redux, Next.js, and testing
- Architecture concepts
- Reusable Components
- React Router
- Presentational Components
- Container Components
- Introduction to Redux
- Redux concepts
- Store & state tree
- Dispatching actions
- Using reducers
- Redux pros and cons
- Introduction to Next.js
- Web SDK
- File-system routing
- Middleware
- Unit testing React code
- Jest syntax
- TDD with React
- Mocking
- React testing library
- Snapshot testing
- Architecture concepts
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Request a Private Class
- Private Class for your Team
- Online or On-location
- Customizable
- Expert Instructors