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.
What is React?, Requiring the React library, Building a React component, Displaying static data, Passing data to components
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 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
Forms in React, Interactive props, Controlled components, Uncontrolled components, Getting started with form wizard, Form events, Parent Child relationship, Form validation
Mixins, PureRender mixins, React and the DOM, Refs
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
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
Creating Backbone models, Incorporating defined Backbone models, Data models and Backbone
The React CSS Transitions Group add-on, Transition events
Development tools, Using Babel for ES6 and JSX, ESLint, React Dev Tools, Build tools, What is Webpack?, Webpack configuration, Loaders, Hot module replacement