Menu
Live Chat
Contact Us
Scheduling Tool
1-888-843-8733
1-888-843-8733

Quick Links

 

Home ❯ Mobile App Development

PDF Add to WishList









Preferred method of contact:

Building Web Applications with React

COURSE TYPE

Advanced

Course Number

2322

Duration

4 Days
Reserve Your Seat

PDF Add to WishList

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

Requirements:

  • 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
  • DELETE
  • 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

Convenient Ways to Attend This Instructor-Led Course

Hassle-Free Enrolment: No advance payment required to reserve your seat.
Tuition due 30 days after you attend your course.

In the Classroom

Live, Online

Private Team Training

1-888-843-8733

info@LearningTree.ca

Live Chat

In the Classroom — OR — Live, Online

Tuition — Standard: $3285   Government: $2890

Feb 20 - 23 (4 Days)
9:00 AM - 4:30 PM EST New York / Online (AnyWare) New York / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online
In-Class

Mar 20 - 23 (4 Days)
9:00 AM - 4:30 PM EDT Rockville, MD / Online (AnyWare) Rockville, MD / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online
In-Class

Jul 31 - Aug 3 (4 Days)
9:00 AM - 4:30 PM EDT New York / Online (AnyWare) New York / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online
In-Class

Sep 11 - 14 (4 Days)
9:00 AM - 4:30 PM EDT Rockville, MD / Online (AnyWare) Rockville, MD / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online
In-Class

Guaranteed to Run

Private Team Training

Enroling at least 3 people in this course? Consider bringing this (or any course that can be custom designed) to your preferred location as a private team training.

For details, call 1-888-843-8733 or Click here »

Tuition

Standard

Government

In Classroom or
Online

Standard

$3285

Government

$2890

Private Team Training

Contact Us »

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 Learning Tree course exam on the last day of your course or online at any time after class and receive a Certificate of Achievement with the designation "Awarded with Distinction."

Prev
Next

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)

- ,

Prev
Next
Chat Now

Please Choose a Language

Canada - English

Canada - Français