Preferred method of contact:

Building Web Applications with React

COURSE TYPE

Advanced

Course Number

2322

Duration

4 Days

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

In the Classroom — OR — Live, Online

Tuition — Standard: $3285   Government: $2890

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

Building Web Applications with React

Thank you for your interest in this event, but there are no available seats at this time. Please select another date. You may also contact a customer service representative or training advisor about your training needs, from single courses to large enterprise solutions.

You have used Passport or Voucher Number for this event. Please contact our Customer Service Representative or Training Advisor and they will work with your payment options.

Jul 31 - Aug 3 (4 Days) 9:00 AM - 4:30 PM EDT New York / Online (AnyWare)
Please select the quantity Please select the quantity
Optional Discounts
?
Have a Promo Code?

Enter a promo code for additional savings.

{{vm.lineItem.$DiscountValidationMessage}} Please enter a valid Promo Code
?
Don't know your Voucher or Passport Number?

Contact us via live chat or call us at 1-888-843-8733 and one of our representatives will assist you with your order.

{{vm.lineItem.$VoucherNumberValidationMessage}} Please enter a valid Voucher or Passport Number
Your Work Email is required Please enter a valid Email
?
BY CLICKING THE GOVERNMENT BOX, YOU AGREE TO THESE TERMS OF USE; IF YOU DO NOT AGREE, LEAVE THAT BOX BLANK TO RECEIVE COMMERCIAL PRICING.

By clicking the Government box – you certify that you/your firm is eligible to receive discounted price available only to Federal, Provincial and Municipal agencies. Colleges, universities and non-for profits are not eligible for the government discount.

Learning Tree reserves the right, at its sole discretion, to change, modify, add or remove portions of these Terms of Use, at any time. It is your responsibility to ensure that you qualify to receive a Government discounted rate. Please contact your Government Account Coordinator for any questions.

Not sure if you qualify? See the ? for details. Terms and Conditions
Price
Pay now -or- pay later
Pay by credit card at checkout
-or- pay later by invoice, as always.

Added to cart

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

Building Web Applications with React

Thank you for your interest in this event, but there are no available seats at this time. Please select another date. You may also contact a customer service representative or training advisor about your training needs, from single courses to large enterprise solutions.

You have used Passport or Voucher Number for this event. Please contact our Customer Service Representative or Training Advisor and they will work with your payment options.

Sep 11 - 14 (4 Days) 9:00 AM - 4:30 PM EDT Rockville, MD / Online (AnyWare)
Please select the quantity Please select the quantity
Optional Discounts
?
Have a Promo Code?

Enter a promo code for additional savings.

{{vm.lineItem.$DiscountValidationMessage}} Please enter a valid Promo Code
?
Don't know your Voucher or Passport Number?

Contact us via live chat or call us at 1-888-843-8733 and one of our representatives will assist you with your order.

{{vm.lineItem.$VoucherNumberValidationMessage}} Please enter a valid Voucher or Passport Number
Your Work Email is required Please enter a valid Email
?
BY CLICKING THE GOVERNMENT BOX, YOU AGREE TO THESE TERMS OF USE; IF YOU DO NOT AGREE, LEAVE THAT BOX BLANK TO RECEIVE COMMERCIAL PRICING.

By clicking the Government box – you certify that you/your firm is eligible to receive discounted price available only to Federal, Provincial and Municipal agencies. Colleges, universities and non-for profits are not eligible for the government discount.

Learning Tree reserves the right, at its sole discretion, to change, modify, add or remove portions of these Terms of Use, at any time. It is your responsibility to ensure that you qualify to receive a Government discounted rate. Please contact your Government Account Coordinator for any questions.

Not sure if you qualify? See the ? for details. Terms and Conditions
Price
Pay now -or- pay later
Pay by credit card at checkout
-or- pay later by invoice, as always.

Added to cart

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

Building Web Applications with React

Thank you for your interest in this event, but there are no available seats at this time. Please select another date. You may also contact a customer service representative or training advisor about your training needs, from single courses to large enterprise solutions.

You have used Passport or Voucher Number for this event. Please contact our Customer Service Representative or Training Advisor and they will work with your payment options.

Jan 29 - Feb 1 (4 Days) 9:00 AM - 4:30 PM EST New York / Online (AnyWare)
Please select the quantity Please select the quantity
Optional Discounts
?
Have a Promo Code?

Enter a promo code for additional savings.

{{vm.lineItem.$DiscountValidationMessage}} Please enter a valid Promo Code
?
Don't know your Voucher or Passport Number?

Contact us via live chat or call us at 1-888-843-8733 and one of our representatives will assist you with your order.

{{vm.lineItem.$VoucherNumberValidationMessage}} Please enter a valid Voucher or Passport Number
Your Work Email is required Please enter a valid Email
?
BY CLICKING THE GOVERNMENT BOX, YOU AGREE TO THESE TERMS OF USE; IF YOU DO NOT AGREE, LEAVE THAT BOX BLANK TO RECEIVE COMMERCIAL PRICING.

By clicking the Government box – you certify that you/your firm is eligible to receive discounted price available only to Federal, Provincial and Municipal agencies. Colleges, universities and non-for profits are not eligible for the government discount.

Learning Tree reserves the right, at its sole discretion, to change, modify, add or remove portions of these Terms of Use, at any time. It is your responsibility to ensure that you qualify to receive a Government discounted rate. Please contact your Government Account Coordinator for any questions.

Not sure if you qualify? See the ? for details. Terms and Conditions
Price
Pay now -or- pay later
Pay by credit card at checkout
-or- pay later by invoice, as always.

Added to cart

Guaranteed to Run

When you see the "Guaranteed to Run" icon next to a course event, you can rest assured that your course event — date, time, location — will run. Guaranteed.

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 any time after class.

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

- ,

Prev
Next
Chat Now

Please Choose a Language

Canada - English

Canada - Français