ReactJS Introduction (2 day – £1,190)

    This course is designed for web developers with a good understanding of Javascript, HTML, and CSS who wish to learn ReactJS from scratch. Delegates will learn how to create, reuse, and compose React components using JSX; share data between React components; handle user interactions with the help of event handlers and dynamic components; and create animations in React.

    Getting Started

    What is React?, Requiring the React library, Building a React component, Displaying static data, Passing data to components

    JSX

    Why use JSX?, Transforming JSX into JavaScript, HTML tags vs React components, Self closing tag, Multiple components, JavaScript expressions, Namespaced components, Spread attributes, Styles in JSX, JSX Gotchas, Conditionals in JSX, Non-DOM attributes

    Data Flow and Life Cycle Events

    Data flow in React, Props validation, Specifying default props, Modifying this.props.children, Setting initial state, Setting state, Avoiding state, State versus props, Component life cycle overview, Component life cycle methods

    Dynamic Components and Forms

    Forms in React, Interactive props, Controlled components, Uncontrolled components, Getting started with form wizard, Form events, Parent Child relationship, Form validation

    Mixins and the DOM

    Mixins, PureRender mixins, React and the DOM, Refs

    React on the Server

    Server-side rendering, Render functions, Server-side component life cycle

    React Addons

    Getting started with Addons, Immutability helpers, Available commands, Cloning components, Helpers for testing React apps, Setting up Jest, Testing the structure of React components, Testing the behaviour of React components, Shallow rendering

    Performance of React Apps

    Virtual DOM, The PERF addon, DOM operations performed by React, Time taken to render all the components, Time wasted by React, The shouldComponentUpdate hook, PureRenderMixin, The PureRenderMixin anti pattern, Immutable data

    React Router and Data Models

    Creating Backbone models, Incorporating defined Backbone models, Data models and Backbone

    Animation

    The React CSS Transitions Group add-on, Transition events

    React Tools

    Development tools, Using Babel for ES6 and JSX, ESLint, React Dev Tools, Build tools, What is Webpack?, Webpack configuration, Loaders, Hot module replacement