4 Days
Learn React and become productive immediately in a high-performance component framework.
Many development teams have shifted from working in legacy frameworks such as Ember or AngularJS, building their architectures using React and a coterie of other APIS such as Redux, React Router, Axios, fetch and others. We’ll show you how to get your job done using a mix React and some of the more popular and useful APIs.
Prerequisites: Some background in JavaScript development is required. Some experience working with ES2015+ is helpful, though we’ll get developers up to speed in the basics at the start of the course.
Key Topic Areas
In this four-day course, you’ll be exposed to the constellation of middleware and integration libraries, and you’ll learn how to work with key lifecycle events to improve your application’s performance. We’ll focus on mastery of key features of the React ecosystem, including:
How to Design and Create Components
How to Work with Props and State
When to Use Pure and Functional Components
How to Deal with Form Data
How to Use the Redux Library to Simplify State Design
How to Configure async and Long-running Side Effects to Redux Data
How to configure and use the React Router
Course Outline
A selected list of topics from the course by chapter. As the training evolves over time, additional topics will be added to the training, and deprecated topics will be removed. Check with our Training Director if you have questions about a specific topic.
- ReactJS Fundamentals
- What is React?
- Key React Concepts
- React History
- Constellation of APIs
- React -vs- Angular 1 -vs- Angular and other SPAs
- React and JavaScript versions, Flow and TypeScript discussion
- Course Goals
- ECMAScript 5, 2015, 2016 and beyond
- The let and const keywords
- Backtick strings
- Modules
- Flattening, spread operations using ... with arrays, objects
- Classes and Constructors
- Arrow functions
- Dealing with the `this` keyword
- Promises
- Short introduction to Typescript
- React as an ecosystem
- Common React APIs
- Redux – a functional implementation of Flux
- MobX, an alternative to Redux
- Flow – Data Types in JavaScript
- GraphQL clients / servers
- React-Router
- Testing APIs (Jest, Sinon, etc)
- Integrating Libraries
- React Native
- create-react-app
- Developer build tools and starter
- What are Components?
- A Minimal Component (JavaScript)
- Mounting a Component (JavaScript)
- Specifying Properties (JavaScript)
- Specifying Inline Styles (JavaScript)
- Non-DOM Attributes
- Non-DOM Attributes Cont’d
- Mounting Children with Iterators
- The Case for JSX
- JSX Basics
- Passing Props
- Validating Props
- Working with component state
- The Virtual Dom and change detection
- Synthetic Events
- Passing events via props
- Events and "this"
- Container and Presentational Components
- Higher order Components
- Validating component props with PropTypes
- React context API
- React lifecycle methods
- Error handling
- PureComponents
- Functional Components
- What is Routing in a Single Page App?
- Building your own Routing with the History API
- The React Router API
- Configuring the Router
- Routing instructions
- Props available to a routed component
- Defining Route links
- Using the history API programmatically
- Code splitting / lazy loading
- Forms and React State
- Defining controlled form components
- Processing controlled form data with submit
- Uncontrolled form components and refs
- Validation techniques
- Guarding dirty form data with Prompt
- Third party forms library example: Formik
- What is Redux?
- How to install
- Reducers
- Dispatching Actions
- Subscribing to state changes
- Redux State management rules
- Introduction to middleware
- Redux with React
- Connecting components with 'react-redux', mapStateToProps, mapDispatchToProps, etc.
- Async actions
- Redux itself is synchronous
- The need for middleware
- The Thunk middleware and dispatching from Async action creators
- Redux API Middleware and the Flux pattern
- Redux Sagas for long-running processes
- Discussion of Ajax APIs
- Review differences in API payloads and call semantics
- An example with Axios
- Where to call Ajax methods (componentDidMount, async reducers?)
Kind Words from Our Students
Interested in training at Chariot?
Use the contact form below to get in touch with us, and a member of our team will reach back out shortly.
* These fields are required.