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

Parameterising components

  • Disambiguating component properties and state
  • Inserting properties into rendered output with this.props
  • Passing property values using JSX { } expressions
  • Initialising 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

Modelling 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
  • Utilising 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
  • Analysing 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()
  • Optimising component reconciliation with key
  • Animating React Applications
  • Including the react-css-transition-group add-on
  • Employing the ReactCS 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 Fee due 30 days after you attend your course.

In the Classroom

Live, Online

Private Team Training

In the Classroom — OR — Live, Online

Tuition Fee — Standard: £2095  

20 - 23 Mar (4 Days)
9:00 AM - 4:30 PM GMT
London / Online (AnyWare) London / Online (AnyWare) Reserve Your Seat

How would you like to attend?

Live, Online
In-Class

AFTERNOON START: Attend these live courses online via Anyware

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

How would you like to attend?

Live, Online
In-Class

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

How would you like to attend?

Live, Online
In-Class

11 - 14 Sep (4 Days)
2:00 PM - 9:30 PM BST
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 0800 282 353 or Click here »

Tuition Fee

Standard

In Classroom or
Online

Standard

£2095

Private Team Training

Contact Us »

Course Tuition Fee 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 class hours:
9:00 a.m. - 4:30 p.m.

Last day class hours:
9:00 a.m. - 3:30 p.m.

Free Course Exam – Last Day:
3:30 p.m. - 4:30 p.m.

Each class day:
Informal discussion with instructor about your projects or areas of special interest:
4:30 p.m. - 5:30 p.m.

AFTERNOON START class hours:
2:00 p.m. - 9:30 p.m.


Last day class hours:
2:00 p.m. - 8:30 p.m.


Free Course Exam – Last Day:
8:30 p.m. - 9:30 p.m.


Each class day:
Informal discussion with instructor about your projects or areas of special interest
9:30 p.m. - 10:30 p.m.

- ,

Prev
Next
Chat Now

Please Choose a Language

Canada - English

Canada - Français