Software Development
Application Development with React and Flux
React and Flux: An Overview
React and Flux: Creating Simple React Components
React and Flux: React Router and Forms
React and Flux: Working with Flux

React and Flux: An Overview

Course Number:
sd_apdr_a01_it_enus
Lesson Objectives

React and Flux: An Overview

  • start the course
  • describe innovations in React and Flux and what advantages they bring over over web development stacks
  • describe features of React and Flux and a reason to use the given technology stack
  • describe Node.js and how it fits with web development
  • describe Browserify and how it fits with web development
  • describe React and how it fits with web development
  • describe React Router and how it fits with web development
  • describe Flux and how it fits with web development
  • describe Gulp and how it fits with web development
  • install Node.js on a developer machine
  • install Gulp on a developer machine
  • configure Gulp on a developer machine
  • configure Browserify on a developer machine
  • install Bootstrap on a developer machine
  • configure ESLint on a developer machine
  • install React on a developer machine
  • install React Router on a developer machine
  • install React DOM on a developer machine
  • install Flux on a developer machine
  • describe React fits into an MVC framework
  • describe issues with two-way binding and how they are avoided in Flux with unidirectional binding
  • describe JSX extension to JavaScript
  • contrast JSX with the equivalent JavaScript
  • use various JavaScript editors for JSX
  • describe the use of virtual DOM in React
  • install tools required on a developer machine to build apps with React and Flux

Overview/Description
React is a powerful library of UI tools designed and maintained by Facebook, and in use in many large-scale web applications. This course will guide you through the initial setup of a developer environment and introduce the strengths of the platform.

Target Audience
Web application developers looking to use React for application development and Flux for unidirectional data flow

React and Flux: Creating Simple React Components

Course Number:
sd_apdr_a02_it_enus
Lesson Objectives

React and Flux: Creating Simple React Components

  • start the course
  • create a React component
  • configure simple routing between components in React without React Router
  • create a header for navigation
  • describe some considerations and conventions when naming React components
  • describe immutable props and mutable state in React components
  • use React component life cycle functions
  • add a key to dynamic child React components
  • create an API for server calls from React
  • create a component with dynamic data
  • use the getInitialState life cycle function to set initial state on a dynamic data component
  • use the componentWillMount life cycle function to update a dynamic data component
  • compose components in React
  • create a controller view in React
  • configure prop validation on React components
  • understand mixins for a React component
  • create a composite React component and wire up life cycle functions

Overview/Description
React components are the core functionality of a React application. Components have life cycle functions to hook in code; support dynamic updating; and can be composed by using controller views. This course covers basic configuration of React components and routing between them without React Router.

Target Audience
Web application developers looking to use React for application development and Flux for unidirectional data flow

React and Flux: React Router and Forms

Course Number:
sd_apdr_a03_it_enus
Lesson Objectives

React and Flux: React Router and Forms

  • start the course
  • configure routes in React Router
  • configure a RouteHandler in React Router
  • use params and querystrings for a component in React Router
  • use the JSX link tag with React Router to reference routes
  • configure a page for not found 404 errors in React Router
  • configure redirects in React Router
  • configure transitions between components and pages using the willTransitionTo and willTransitionFrom functions in React Router
  • configure hash location and history location routing with React Router
  • configure the built-in Router.Navigation mixin with React Router
  • configure a basic form in React
  • build a controller view for a form page in React
  • build controlled form components in React
  • create a reusable text input component
  • consume a reusable text input component
  • configure buttons in a React form
  • configure redirects programmatically in React
  • use the toastr library to configure simple toast notifications in a React application
  • configure form validation in React
  • configure PropTypes on components to enforce passed data types
  • use transitions in a form to prevent form data loss when moving away from a form page
  • configure form hydration using a URL in React
  • create a form and routes in React and React Router

Overview/Description
Although React has no opinion about how routes are handled, and you can manually wire up routes in a React app. A much more coherent, configurable, and manageable approach is to use React Router, which was specifically designed for the task. Creating forms with validation and logic attached is a perennial challenge for web app developers. This course covers basic routing with React Router, and techniques for building reusable forms and form components.

Target Audience
Web application developers looking to use React for application development and Flux for unidirectional data flow

React and Flux: Working with Flux

Course Number:
sd_apdr_a04_it_enus
Lesson Objectives

React and Flux: Working with Flux

  • start the course
  • describe Flux and how it fits with React
  • describe the core Flux concepts
  • configure a basic Flux action
  • configure a Flux dispatcher
  • create a Flux store
  • configure a controller view in a Flux application
  • describe the flow of events in Flux
  • use the five functions in Facebook's Flux API
  • configure Flux change listeners
  • register a Flux store with the dispatcher
  • configure private storage for a Flux store
  • configure Flux store interactions via actions
  • create an initialize action to initialize a Flux store
  • update data using Flux
  • add a Flux store listener
  • delete data via Flux
  • configure a Flux Action, Dispatcher, and Store

Overview/Description
Flux is a pattern of unidirectional data flow designed to handle data flows throughout an application. There are numerous implementations of Flux, all subtly different. This course covers the use of Facebook's Flux pattern within a web application developed in React.

Target Audience
Web application developers looking to use React for application development and Flux for unidirectional data flow

Close Chat Live