Live Chat
Monday - Friday 8am - 6pm EST Chat Now
Contact Us
Monday - Friday 8am - 8pm EST 1-866-716-6688 Other Contact Options
Checkout

Cart () Loading...

    • Quantity:
    • Delivery:
    • Dates:
    • Location:

    $

Mastering React | React, Redux, JSX, Flux, Forms, Unit Testing, & More (TTSREACT3)

In-depth modern react web development skills training for experience developers

GK# 8454

Course Overview

TOP

Mastering React is a 5-day, in-depth hands-on course that aims to be the single most useful resource on getting up to speed quickly with React.  Geared for more experienced web developers, this course provides students with the core knowledge and hands-on skills they require to build reliable, powerful React apps.

After the first few modules, you’ll have a solid understanding of React’s fundamentals and will be able to build a wide array of rich, interactive web apps with the framework. Topics like client-side routing between pages, managing complex state, and heavy API interaction at scale are also discussed.  We cover all the fundamentals with a progressive, example-driven approach. You’ll create your first apps, learn how to write components, and start handling user interaction.  We will also explore the inner workings of Create React App (Facebook’s tool for running React apps), writing automated unit tests, and building a multi-page app that uses client-side routing.

The latter part of this course moves into more advanced concepts that you’ll see used in large, production applications. These concepts explore strategies for data architecture, transport, and management: Redux is a state management paradigm based on Facebook’s Flux architecture. Redux provides a structure for large state trees and allows you to decouple user interaction in your app from state changes.

If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional related React, Redux, Angular, web development, scripting, programming and design courses which may be blended with this course for a track that best suits your objectives.

Schedule

TOP
  • Delivery Format:
  • Date:
  • Location:
  • Access Period:

$

What You'll Learn

TOP

Working within in an engaging, hands-on learning environment, attendees will learn to:

  • Understand the ReactJS basics through an overview
  • Install and create your first React component
  • Refactor the ReactJS component using JSX
  • Handle UI elements events with React, respond to users input, and create stateful components
  • Use some core lifecycle events for integration and find out about ES6 syntaxes in the React world
  • Understand the FLUX architecture and create an application using FLUX with React
  • Make a component more reusable with validation helpers and structure your components properly
  • Explore techniques to test your ReactJS code
  • Deploy your code using webpack.

 

Course Topics:  This is a high-level list of the course topics covered in this training. Please see the detailed Course Agenda with session details, lessons and labs listed below.

  • Your first React Web Application
  • Components
  • JSX and the Virtual DOM
  • Advanced Component Configuration with props, state, and children
  • Forms
  • Unit Testing
  • Routing
  • Intro to Flux and Redux
  • Intermediate Redux
  • Using Presentational and Container Components with Redux
  • (OPTIONAL) Working with React Native

Outline

TOP
Viewing outline for:

Virtual Classroom Live Outline

Your first React Web Application

  • Building Product Hunt
  • Setting up your development environment
  • Special instruction for Windows users
  • JavaScript ES6/ES7
  • Getting started
  • What’s a component?
  • Building Product
  • Making Product data-driven
  • React the vote (your app’s first interaction)
  • Updating state and immutability
  • Refactoring with the Babel plugin transform-class-properties

 

Components

A time-logging app

Step 1: Getting started

  • Breaking the app into components
  • The steps for building React apps from scratch

Step 2: Build a static version of the app

Step 3: Determine what should be stateful

Step 4: Determine in which component each piece of state should live

Step 5: Hard-code initial states

Step 6: Add inverse data flow

  • Updating timers
  • Deleting timers
  • Adding timing functionality
  • Add start and stop functionality
  • Methodology review

 

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

 

Advanced Component Configuration with props, state, and children

  • Intro
  • How to use this chapter
  • ReactComponent
  • props are the parameters
  • PropTypes
  • Default props with getDefaultProps()
  • context
  • state

 

Forms

  • Forms 101
  • Text Input
  • Remote Data
  • Async Persistence
  • Redux
  • Form Component
  • react-input-enhancements
  • tcomb-form
  • winterfell
  • react-redux-form
  • Unit Testing
  • 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

 

Routing

  • What’s in a URL?
  • Building the components of react-router.
  • Dynamic routing with React Router
  • Supporting authenticated routes
  • Intro to Flux and Redux
  • Why Flux?
  • Flux implementations
  • Redux
  • Building a counter
  • Building the store
  • The core of Redux
  • The beginnings of a chat app
  • Building the reducer()
  • Subscribing to the store
  • Connecting Redux to React

 

Intermediate Redux

  • Preparation
  • 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

 

Using Presentational and Container Components with Redux

  • Presentational and container components.
  • Splitting up ThreadTabs
  • Splitting up Thread
  • Removing store from App
  • Generating containers with react-redux
  • Action creators

 

(OPTIONAL) Working with React Native

  • Init
  • Routing
  • <Navigator />
  • Web components vs. Native components
  • Styles
  • HTTP requests
  • What is a promise
  • Single-use guarantee.
  • Creating a promise
  • Debugging with React Native

Labs

TOP
Viewing labs for:

Virtual Classroom Live Labs

This “skills-centric” course is about 50% hands-on lab and 50% lecture, designed to train attendees in core modern web development skills, coupling the most effective techniques with the soundest industry practices. Throughout the course students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review. Our courses include a wide range of supporting materials and labs to ensure all students are appropriately challenged or assisted at all times.

Prerequisites

TOP

In order to be successful in this class, incoming attendees are required to have current, hands-on, solid experience in web application development, and be versed in HTML5, CSS3 and JavaScript essentials. 

Who Should Attend

TOP

This is an introductory-level React development course, designed for experienced web developers that need to further extend their skills in modern web development using React.

Course Delivery

This course is available in the following formats:

Virtual Classroom Live

Experience expert-led online training from the convenience of your home, office or anywhere with an internet connection.

Duration: 5 day

Request this course in a different delivery format.
Enroll