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