Mastering React is a comprehensive hands-on course that aims to be the single most useful resource on getting up to speed quickly with React. This course provides students with the core knowledge and hands-on skills they require to build reliable, powerful React apps. You’ll learn fundamentals with a progressive, example-driven approach. You’ll create your first apps, learn how to write components, start handling user interaction, and manage rich forms as well as learn more advanced concepts that you’ll see used in large, production applications.

starstarstarstarstar_half

* Actual course outline may vary depending on offering center. Contact your sales representative for more information.

Learning Objectives

Our engaging instructors and mentors are highly experienced practitioners who bring years of current "on-the-job" experience into every classroom. Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:
A basic and advanced understanding of React components
An advanced, in-depth knowledge of how React works
A complete understanding of using Redux
How to build, validate, and populate interactive forms
How to use inline styles for perfect looking components
How to test React components
How to build and use components
How to get control of your build process
A deep understanding of data-driven modeling with props and state
How to use client-side routing for pages in your apps
How to debug a React application

1

  • ES6 Primer (Optional)

  • Prefer const and let over var
    Arrow functions
    Modules
    Object.assign()
    Template literals
    The spread operator and Rest parameters
    Enhanced object literals
    Default arguments
    Destructuring assignments
2

  • Your first React Web Application

  • Setting up your development environment
    JavaScript ES6 /ES7
    Getting started
    What's a component?
    Our first component
    Building the App
    Making the App data-driven
    Your app's first interaction
    Updating state and immutability
    Refactoring with the Babel plugin transform-class-properties
3

  • JSX and the Virtual DOM

  • React Uses a Virtual DOM
    Why Not Modify the Actual DOM?
    What is a Virtual DOM?
    Virtual DOM Pieces
    ReactElement
    JSX
    JSX Creates Elements
    JSX Attribute Expressions
    JSX Conditional Child Expressions
    JSX Boolean Attributes
    JSX Comments
    JSX Spread Syntax
    JSX Gotchas
    JSX Summary
4

  • Components

  • A time-logging app
    Getting started
    Breaking the app into components
    The steps for building React apps from scratch
    Updating timers
    Deleting timers
    Adding timing functionality
    Add start and stop functionality
    Methodology review
5

  • Advanced Component Configuration with props, state, and children

  • ReactComponent
    props are the parameters
    PropTypes
    Default props with getDefaultProps()
    context
    state
    Stateless Components
    Talking to Children Components with props.children
6

  • Forms

  • Forms 101
    Text Input
    Remote Data
    Async Persistence
    Redux
    Form Modules
7

  • Unit Testing & Jest

  • Writing tests without a framework
    What is Jest?
    Using Jest
    Testing strategies for React applications
    Testing a basic React component with Enzyme
    Writing tests for the food lookup app
    Writing FoodSearch.test.js
8

  • Routing

  • What's in a URL?
    React Router's core components
    Building the components of react-router
    Dynamic routing with React Router
    Supporting authenticated routes
9

  • Intro to Flux and Redux

  • Why Flux?
    Flux is a Design Pattern
    Flux implementations
    Redux & Redux's key ideas
    Building a counter
    The core of Redux
    The beginnings of a chat app
    Building the reducer()
    Subscribing to the store
    Connecting Redux to React
10

  • Intermediate Redux

  • Using createStore() from the redux library
    Representing messages as objects in state
    Introducing threads
    Adding the ThreadTabs component
    Supporting threads in the reducer
    Adding the action OPEN_THREAD
    Breaking up the reducer function
    Adding messagesReducer()
    Defining the initial state in the reducers
    Using combineReducers() from redux
11

  • React Hooks

  • Motivation behind Hooks
    How Hooks Map to Component Classes
    Using Hooks Requires react 'next'
    useState() Hook Example
    useEffect() Hook Example
    useContext() Hook Example
    Using Custom Hooks
12

  • Using Webpack with Create React App

  • JavaScript modules
    Create React App
    Exploring Create React App
    Webpack basics
    Making modifications
    Hot reloading; Auto-reloading
    Creating a production build
    Ejecting
    Using Create React App with an API server
    When to use Webpack/Create React App
13

  • Using GraphQL

  • Your First GraphQL Query
    GraphQL Benefits
    GraphQL vs. REST
    GraphQL vs. SQL
    Relay and GraphQL Frameworks
    Chapter Preview
    Consuming GraphQL
    Exploring With GraphiQL
    GraphQL Syntax 101 .
    Complex Types
    Exploring a Graph
    Graph Nodes ; Viewer
    Graph Connections and Edges
    Mutations
    Subscriptions
    GraphQL With JavaScript
    GraphQL With React

Audience

This introductory-level, fast-paced course is for skilled web developers new to React who have prior experienced working HTML5, CSS3 and JavaScript.

Language

English

Prerequisites

While there are no prerequisites for this course, please ensure you have the right level of experience to be successful in this training.

$2,595

Length: 5.0 days (40 hours)

Level:

Not Your Location? Change

Course Schedule:

Schedule select
13
Nov
Monday
10:00 AM ET -
6:00 PM ET
Filling Fast
Available
Loading...