See how Insoft Services is responding to COVID-19

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.


Upcoming Dates

Oct 12 - Oct 15, 2021
09:00 - 17:00
Online

Nov 8 - Nov 11, 2021
09:00 - 17:00
Online

Dec 13 - Dec 16, 2021
09:00 - 17:00
Online

Jan 11 - Jan 14, 2022
09:00 - 17:00
Online

  Feb 8 - Feb 11, 2022
09:00 - 17:00
Online

  • Building Web Applications with React and Redux (REACT)
    4 days  (Instructor Led Online)  |  Software Development

    Course Details

    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.

    Objectives

    • 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

    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

    Prerequisites

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

    • JavaScript for Modern Web Development