Duration
4 days
Overview
This course shows how to use 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.
Course Topics
- Introduction to "Modern (ES5)" JavaScript
- JavaScript Refresher
- Introduction to ES2015 (ES6)
- Basic language features
- Creating variables
- 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
- 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
- Introduction to TypeScript
- What is TypeScript?
- Benefits of TypeScript
- Setup the Environment
- First TypeScript Example
- Installation Overview
- Setup
- Creating the Project
- Using a Third-Party Package
- Adding Commands
- Using the TypeScript Compiler
- Understanding the Project Structure
- Using the Node Package Manager
- Compiling TypeScript Code
- Understanding Static Types
- Using Functions
- Defining Functions
- Using Arrays, Tuples, and Enums
- Working with Arrays
- Working with Tuples
- Using Enums
- Working with Classes and Interfaces
- Using Constructor Functions
- Using Classes
- Using Interfaces
- ReactJS and TypeScript Environment
- Understanding ReactJS and TypeScript
- Create ReactJS
- Setting up Typescript in React App using --typescript flag
- Understanding "js" files
- Understanding "ts" files
- Knowing the "ts" and "tsx" extension
- React TypeScript Component
- Creating a Component in Typescript
- Recognize the required import statement
- The props and state with datatype declaration
- Creating function with TypeScript anchor.
- Functions
- Know the React.FC (Function Component)
- Creating function with FC
- Function compilation identification
- the "useState" example
- Function return with few data type using pipe "|"
- Using void and undefined
- Interface
- Creating interface
- Set properties using data type
- Using switch with "action.type"
- Type and object
- Using Action with types.
- Project Running
- Run the full compiled project
- Recap of ReactJS and TypeScript
Programme scope, delivery arrangements and suitability are confirmed during enquiry.