EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

ReactJS 3

Course outline

3 days
Discuss this programme →

Duration

3 days

Overview

This course shows how to use Facebook’s ReactJS framework to build fast, modern, scalable single page web applications (SPAs). The course covers the principles of SPA development, and then takes the students through the process of building a ReactJS user interface. The course introduces JSX, the pseudo-HTML used in building ReactJS components, and moves on creating composite components and controller views using props and state. The students will build and validate Web forms and use Facebook’s unidirectional design pattern Flux, combining stores and actions to communicate with Web services and manage state. Students will gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.

Learning Objectives

  • Creating components using JSX
  • Building composite components
  • Props, state, and controller views
  • Working with controlled forms
  • Routing with react-router
  • Unit Testing ReactJS components
  • Implementing the Flux design pattern
  • Leveraging stores and actions

Prerequisites

Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.

Day 1

  • Introduction to "Modern (ES5)" JavaScript
  • JavaScript Refresher
  • Introduction to ES2015 (ES6)
  • Basic language features
  • Creating variables

Day 2

  • Primitives and wrapper objects in JavaScript
  • JavaScript types: Number, String, Boolean, Date
  • Functions, functional programming and nesting functions
  • Arrays – Ordered sequence of items
  • Indexed property access
  • Scope and Context
  • JavaScript visibility rules
  • Global variables
  • Object functions and execution
  • The this keyword in JavaScript
  • JavaScript == and false conditions and Triple Equals ===
  • Creating Objects with JavaScript literal syntax and constructor functions
  • Typeof and objects
  • Special comparisons for objects
  • Key JavaScript built-in objects
  • Introduction to REACT
  • What react is and what it is not
  • React concepts
  • Component composition
  • How react works
  • How Virtual DOM works
  • How react handles data binding
  • Advantages & Limitations
  • Setting up ReactJS Development Environment
  • Using Webpack / Babel
  • Using npm & package.json file
  • Look at an ReactJS application
  • Organizing source code
  • React browser plugin
  • Creating a simple React Application
  • A simple react component with JSX template
  • Component structure
  • React render

Day 3

  • Component properties and property passing
  • Props validation with data types
  • States, initialize states and update states
  • Pure components
  • Introduction to JSX
  • Components
  • HTML attributes example. Class and Id etc
  • Child Components and Namespaced components
  • JavaScript expressions in JSX like attribute, boolean or child expression
  • Forms
  • Form components example input, textarea
  • Controlled form components
  • Uncontrolled form components
  • Checkboxes and Radios
  • Select box with default selected values
  • Form validation
  • Component Life Cycle
  • Mounting Components
  • Updating Components
  • Setting Properties
  • Composing Components
  • Sibling Components and Key
  • Parent and Child Components
  • Props and State E. Component Life-Cycle
  • Conditional Statements in React
  • If-else in JSX
  • IIFE in JSX for complex logic
  • Event handling
  • React.js Event Handlers
  • Synthetic Events
  • Keyboard
  • Composition
  • Focus
  • Form
  • Mouse
  • Clipboard
  • Selection
  • Touch
  • Event Pooling
  • Other useful events in React
  • Sharing events across the components
  • React Styles
  • CSS and inline styles
  • Setting up the react for React bootstrap
  • Implementing the react bootstrap components
  • React Router & Navigation
  • Loading the router library
  • Router configuration
  • Passing and receiving parameters
  • React-cookie integration
  • Introduction to FLUX
  • Flux pattern
  • Flux Application Architecture
  • Rational and MVC comparison
  • Data Flow – Action, Dispatcher, Store & View
  • Redux
  • Reducer / Action / Store
  • Creating a dynamic UI in React
  • React Stateful Components
  • Keeping components stateless
  • Autobinding
  • Event Delegation
  • Unit Testing
  • Tools for Unit Testing
  • Jest & Jasmine
  • Enzyme
  • React Unit Testing
  • Testing DOM manipulations
  • Testing properties and state
  • Simulating Events
  • Shallow Rendering

Programme scope, delivery arrangements and suitability are confirmed during enquiry.