Building Web Applications with React and Redux (REACT)

X

Contact Us

We would love to hear from you. Please complete this form to pre-book or request further information about our delivery options.

Subscribe

I'd like to receive emails with the latest updates and promotions from Insoft.

Data Protection & Privacy

I hereby allow Insoft Ltd. to contact me on this topic. Further, I authorise Insoft Ltd. processing, using collecting and storing my personal data for the purpose of these activities. All your data will be protected and secured as outlined in our privacy policy.


Building Web Applications with React and Redux (REACT)

Enroll Now
Duration
4 Days
Delivery
(Online and onsite)
Price
Price Upon Request
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.
  • 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

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

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

  • JavaScript for Modern Web Development
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.
  • 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

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

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

  • JavaScript for Modern Web Development
    Upcoming Dates
  • ` Dec 12 - Dec 15, 2022
  • ` Jan 9 - Jan 12, 2023
  • ` Feb 6 - Feb 9, 2023
  • ` Mar 6 - Mar 9, 2023
  • ` Apr 3 - Apr 6, 2023
  • ` May 1 - May 4, 2023