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

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

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 “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.

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.