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

Information Technology Information Technology Training

8454

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

$2,895

Live Virtual

for

Private/On Site

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, youll have a solid understanding of Reacts 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. Youll 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 (Facebooks 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 youll see used in large, production applications. These concepts explore strategies for data architecture, transport, and management: Redux is a state management paradigm based on Facebooks 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.

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

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.

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.

Your first React Web Application

  • Building Product Hunt
  • Setting up your development environment
  • Special instruction for Windows users
  • JavaScript ES6/ES7
  • Getting started
  • Whats a component?
  • Building Product
  • Making Product data-driven
  • React the vote (your apps 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

  • Whats 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
  • Web components vs. Native components
  • Styles
  • HTTP requests
  • What is a promise
  • Single-use guarantee.
  • Creating a promise
  • Debugging with React Native

Questions?

Whether you need assistance scheduling a class for yourself or for your group, GCA's Education Account Manager's will craft a customized training solution to meet the needs of your organization.