Duration: 3 Days

React with ES6 and Redux

React is an open source javascript library from Facebook used for view rendering in large scale or single page application (SPA). It encourages the creation of reusable UI components which present data that changes over time. React can also render on the server using Node, and it can power native apps using React Native.

Prerequisites:

• Thorough understanding of JavaScript
• Knowledge of JavaScript, HTML events and CSS is highly helpful

Objectives

In this course, you will:

• Learn ES6 new features
• Understand what React is and what problems it solves
• Learn React best practices
• Gain a deeper knowledge of JSX
• Implement Redux framework with React
• Implement unit tests for React components

Audience

This training is for developers familiar with Javascript who are diving into the React library for the first time.

Outline

• ES6
  • Let and Const
  • Template Literals
  • Default Parameters
  • Arrow Functions
  • Destructuring & Parameter Context matching
  • Spread & Rest Operator
  • Classes & Inheritance
  • Modules
  • Symbol, Sets & Maps
  • For-of Iterator
  • Generators
  • Number Formatters


• JavaScript Core Concepts
  • Single Threading, Event Loop & Call Stack
  • Async Callbacks & Promises


• What is React
  • What react is and what it is not
  • Advantages
  • Limitations
  • How react works


• Introduction to JSX
  • Virtual DOM
  • JS vs JSX
  • React Components
  • HTML attributes e.g. class and id etc
  • Child Components and Namespaced components
  • Javascript expressions in JSX like attribute, boolean or child expression


• Setting up your React Development Environment
  • Look at a React applications in CodePen
  • Setup Cloud9 IDE & Discussion of WebStorm
  • Using npm & package.json file
  • Webpack & ES6 Introduction
  • Organizing your source code
  • React browser plugins


• Creating a simple React Application
  • A simple react component with JSX template
  • Nesting Components
  • React render
  • React Props
  • Props validation with data types
  • States, Initialize states and update states


• React UI and Forms
  • Form components e.g. input, textarea
  • Controlled form components
  • Uncontrolled form components
  • Checkboxes and Radios
  • Select box with default selected value
  • Form validation


• Component Life Cycle
  • Initial Render
  • Props Change
  • Stage Change
  • Component Unmount


• React Router and Other JS concepts
  • React Router configuration
  • Router History
  • If-else in JSX
  • IIFE in JSX for complex logic


• React Router & Navigation
  • Loading the router library
  • Router configuration
  • Passing and receiving parameters
  • React-cookie integration


• Event Handling in JSX
  • onClick, onKeyUp and other useful events in React
  • Sharing events across the components


• Redux
  • What is Redux Architecture
  • How Redux works
  • One Store
  • Provider Component
  • Actions
  • Reducers
  • Redux application development


• React Router & Navigation
  • Loading the router library
  • Router configuration
  • Passing and receiving parameters
  • React-cookie integration


• Unit Testing
  • Tools for Unit testing
  • React Unit testing
  • JEST
  • React Component testing
  • React Router Testing