LateStartHours => ComplianceDisclaimer => OnDemand =>

Mobile App Development

Preferred method of contact:

Building Web Applications with React



Course Number



4 Days

View Schedule

React is an open-source JavaScript library from Facebook used for building HTML5 web applications. In this training course, you learn how to develop a complete application by building high-performance User Interfaces (UIs) with JSX components targeting a virtual DOM, and creating Flux applications, which provide complementary architectural patterns to construct client-side application functionality.

You Will Learn How To

  • Create an isomorphic web application using Facebook React and Flux
  • Compose a UI using React JavaScript and JSX components
  • Integrate React forms with Ajax and back-end REST services
  • Apply the Flux application pattern (dispatcher, stores, and actions)
  • Exploit React animation components with CSS3 transitions

Important Course Information


  • Experience developing web pages with JavaScript, HTML, and CSS at the level of:

Course Outline

  • Introduction and Overview
  • Features of React and Flux
  • Benefits of the virtual DOM
  • Configuring the development and build environment
  • Designing Custom React Components

Displaying React content

  • Employing React.createElement() and React.DOM.* factories
  • Rendering the application with ReactDOM.render()
  • Constructing the UI on the server with renderToString()

Leveraging JSX for UI design

  • Coding custom components with React.createClass()
  • Generating component output with the render method
  • Composing a JSX component hierarchy
  • Incorporating third-party components
  • Activating React Components

Parameterizing components

  • Disambiguating component properties and state
  • Inserting properties into rendered output with this.props
  • Passing property values using JSX { } expressions
  • Initializing default values with getDefaultProps()

Manipulating component state

  • Setting starting state values with getInitialState()
  • Reading application data with this.state
  • Mutating data with this.setState()
  • Harnessing React autobinding and event aggregation

Integrating into the component life cycle

  • Attaching and detaching logic and event handlers in componentDidMount and componentWillUnmount
  • Enhancing performance with componentShouldUpdate
  • Responding to changes with componentWillReceiveProps
  • Developing React Forms

Manipulating form input components

  • Working with interactive properties
  • value
  • defaultValue
  • checked
  • selected
  • Capturing form component updates with onChange
  • Comparing controlled and uncontrolled components

Simulating two-way binding

  • Applying the onChange / setState() convention
  • Employing the LinkedStateMixin
  • Passing ReactLink objects through the props hierarchy

Connecting React to REST services

  • Making Ajax calls from React
  • Mapping CRUD access to REST actions
  • GET
  • POST
  • PUT
  • Creating Flux Applications

Modeling client-side data interactivity

  • Identifying Flux participants
  • Actions
  • Dispatcher
  • Stores
  • Views
  • Harnessing unidirectional data flow
  • Comparing Flux to Model View Controller, Redux and Relay

Coding a Flux application

  • Extending the Facebook Dispatcher
  • Utilizing Node.js EventEmitter with custom stores
  • Integrating REST access with Flux action creators

Integrating routing into Flux

  • Exploiting the react-router for semantic URLs
  • Mapping URL paths and parameters to components
  • Analyzing React Applications

Developer tools

  • Inspecting React components with browser extensions
  • Identifying and debugging rendering errors

Unit testing

  • Running tests with Jest
  • Simulating event dispatch with ReactTestUtils.Simulate

Performance testing

  • Establishing a baseline
  • Profiling React execution with Perf.start() and stop()
  • Optimizing component reconciliation with key
  • Animating React Applications
  • Including the react-css-transition-group add-on
  • Employing the ReactCSSTransitionGroup component
  • Writing CSS transitions and animations
Show complete outline
Show Less

Course Schedule

Attend this live, instructor-led course In-Class or Online via AnyWare.

Hassle-Free Enrollment: No advance payment required.
Tuition due 30 days after your course.

Aug 8 - 11 Herndon, VA/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Aug 29 - Sep 1 New York/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Sep 19 - 22 Rockville, MD/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Feb 20 - 23 New York/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Mar 20 - 23 Rockville, MD/AnyWare Enroll Now

How would you like to attend?

Live, Online via AnyWare

Guaranteed to Run

Bring this Course to Your Organization and Train Your Entire Team
For more information, call 1-888-843-8733 or click here






Course Tuition Includes:

After-Course Instructor Coaching
When you return to work, you are entitled to schedule a free coaching session with your instructor for help and guidance as you apply your new skills.

After-Course Computing Sandbox
You'll be given remote access to a preconfigured virtual machine for you to redo your hands-on exercises, develop/test new code, and experiment with the same software used in your course.

Free Course Exam
You can take your course exam on the last day of your course and receive a Certificate of Achievement with the designation "Awarded with Distinction."



Call 1-888-843-8733 or click here »

An experienced training advisor will happily answer any questions you may have and alert you to any tuition savings to
which you or your organization may be entitled.

Training Hours

Standard Course Hours: 9:00 am – 4:30 pm
*Informal discussion with instructor about your projects or areas of special interest: 4:30 pm – 5:30 pm

FREE Online Course Exam (if applicable) – Last Day: 3:30 pm – 4:30 pm
By successfully completing your FREE online course exam, you will:

  • Have a record of your growth and learning results.
  • Bring proof of your progress back to your organization
  • Earn credits toward industry certifications (if applicable)

Enhance Your Credentials with Professional Certification

Learning Tree's comprehensive training and exam preparation guarantees that you will gain the knowledge and confidence to achieve professional certification and advance your career.

Earn 23 Credits from NASBA

This course qualifies for 23 CPE credits from the National Association of State Boards of Accountancy CPE program. Read more ...

- ,


Please Choose a Language

Canada - English

Canada - Français