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

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.

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

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.

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.