Duration
5 days
Agenda
Time
Day 5
9.00am –
9.15am
Sign in and Start class
9.15am –
10.30am
Creating a simple
React Application
Securing React
application
Catching date
React Hooks
Microservices
10.30am –
10.40am
Morning break
10.40am –
1.00pm
Component lifecycle & composing
component
React router & Navigation
Creating a dynamic UI in React
Introduction to Typescript
Microservices (cont.)
1.00pm –
2.00pm
Lunch break
2.00pm –
4.00pm
Forms & event
handling
Introduction to
Flux
Advanced ReactJS
concept
React with
Typescript
Messaging queue
(RabbitMQ)
4.00pm –
4.10pm
Afternoon break
4.10pm –
5.00pm
Styling React components &
elements
Modelling Application State
& Actions
Advanced ReactJS concept (cont.)
Unit Testing
Messaging queue (ActiveMQ)
Overview
React or React.js is a popular, high-performance open source JavaScript framework from Facebook used for view rendering work in large scale or single page applications (SPA) to foster a more comfortable user experience. React encourages the creation of reusable UI components to present data that changes over time. React.js offers a world of possibilities, such as server-side rendering, real-time updates, different rendering targets like Android, iOS, and many more.
This course shows how to use Facebook’s ReactJS framework to build fast, modern, scalable web applications. The course covers the principles of front-end development, and then takes the participants 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 participants will learn, 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. Participants 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
- Props, state, and controller views
- Realize the power of building composable, reusable components
- Working with controlled forms
- Routing with react-router
- Unit Testing ReactJS components
- Implementing the Flux design pattern
- Leveraging stores and actions
- Build amazing single page applications with React JS and Redux
Prerequisites
Before attending this program, participants should have general programming experience and knowledge of HTML, CSS and JavaScript.
Day 1
- Creating a simple React Application
- A simple react component with JSX template
- Component structure
- React render
- Pure components
- Functional components
- Class based components
- Why use one or the other
- Component props and property passing
- Props validation with data types
- Limitations of props
- Using state
- When to use state, when to use props
- Initialize states and update states
- Testing components
- Lab: HeaderComponent, FooterComponent and ProductListComponent
- Component Life Cycle
- Start-up and Mounting Components
- Updating Components
- Unmounting Components
- Calling / Implementing life cycle methods
- Setting Properties
- Composing Components
- Components within Components
- Known children and unknown children
- Sibling Components and Key
- Parent and Child Components
- Communication from parent to child
- Communication from child to parent
- Lab: Communication between ProductComponent and ProductListComponent
- Forms
- Form components example textbox, textarea, checkbox, radiobutton, select
- Controlled form components
- Uncontrolled form components
- Checkboxes and Radios
- Select box with default selected values
- Form validation
- Lab: ListComponent, AddProductComponent, ModifyProductComponent
- Event handling
- React.js Event Handlers
- Synthetic Events
- Form
- Composition
- Focus
- Keyboard
Day 2
- Mouse
- Clipboard
- Selection
- Touch
- Event Pooling
- Other useful events in React
- Sharing events across the components
- Lab: SeachProductComponent and SortProductComponent
- Lab: ShoppingCartComponent – Add products into shopping cart
- Styling React Components & Elements
- CSS and inline styles
- Setting up the react for React bootstrap
- Implementing the react bootstrap components
- Setting Styles Dynamically
- Setting Class Names Dynamically
- Enabling & Using CSS Modules
- Working with Media Queries
- Securing React Applications
- JSON Web Tokens (JWT)
- Session State
- Storing the state on the client
- Authentication & Authorization
- React Router & Navigation
- Loading the router library
- Router configuration
- Passing and receiving parameters
- React-cookie integration
- Protecting routes on the client
- Lab: Participants Registration
- Lab: Login, Authentication and Authorization
- Lab: Dashboard
- Lab: User Profile, My Products
- Introduction to FLUX
- Flux pattern
- Flux Application Architecture
- Rational and MVC comparison
- Data Flow – Action, Dispatcher, Store & View
- Reducer / Action / Store
- Lab: Storing JWT in web store
- Lab: Storing User Profile, My Products in web store
- Modelling Application State
- Foreword on Redux - What is Redux?
- Managing App State with Redux
- Reducers
- Containers - Connecting Redux to React
- Implementation of a Container Class
- Containers and Reducers Review
- Actions
- Actions and Action Creators
- Binding Action Creators
- Creating an Action
- Consuming Actions in Reducers
- Consuming Actions in Reducers Continued
- Conditional Rendering
- Reducers and Actions Review
Day 3
- Catching Data
Introduction
- Catching Data with Posts Reducer
- Catching Data with Posts Reducer Continued
- Fetching Data with Lifecycle Methods
- Fetching Data with Lifecycle Methods Continued
- Creating a dynamic UI in React
- React Stateful Components
- Keeping components stateless
- Auto binding
Day 4
- Event Delegation
- React.js Error Handling
- Advanced ReactJS Concepts
- Function component
- Destructuring props
- JSX spread attributes
- Merge destructured props with other values
- Conditional rendering
- Children types
- Array as children
- Function as children
- Render prop
- Children pass-through
- Proxy component
- Style component
- Event switch
- Layout component
- Container component
- Higher-order component
- State hoisting
- Controlled input
- React Hooks
- What are React Hooks
- Introducing the useState Hook
- Introducing the useEffect Hook
- Function components vs Class components
- Fetching Data with useEffect
- Using the useRef Hook
- CRUD app with React Hooks
- Connecting to an API using React Hooks
- Introduction to TypeScript
- Environment Setup
- Basic Syntax
- Number, Strings, Arrays, Tuples, Union and Enumerators
- Types, Variables and Operators
- Decision Making and Loops
- Functions and Lambda Expressions
- Generics
- Interface, Classes, Objects and Namespaces
- Modules
- Decorators
- Ambient and Mixins
- React with TypeScript
Introduction
- Functional Components
- Class Components
- Higher Order Components
- Render Props
- Lab: Convert the e-Commerce Solution using TypeScript
- Unit Testing
- Tools for Unit Testing
- Jest & Jasmine
- Enzyme
- React Unit Testing
- Testing DOM manipulations
- Testing properties and state
- Simulating Events
- Shallow Rendering
Day 5
- Microservices
- Understanding Microservices
- Architecting Microservices
- Building Microservices
- Communicating between Microservices
- Delivering Microservices
- Introduction to Messaging Queue (RabbitMQ and ActiveMQ)
- Understanding Queuing Architecture
- Message Queuing
- Uses for Message Queuing
- The role of a consumer
- The role of a producer
- Bindings consumers
- Bindings producers
- Messages and durability
Programme scope, delivery arrangements and suitability are confirmed during enquiry.