Topics

React js is a client side UI building library to develop web based applications.React is a library developed by Facebook, and it is designed to build large applications with data that changes over time. Developers can use ReactJS to create user interfaces (UI) with high performance, where React would automatically manage all UI updates. React is all about building reusable web components,

  1. Objective is End to end development training to enable associate build a full-fledged application with React + Redux + Redis + micro-services, Redux Store, Redux Thunk and Redux promises

  2. We will talk about ES5/ES6 transpilers and hands-on on React application with Routing and different npm packages for building application

  3. React.js Fundamentals with ES6 & Web pack with Code examples

  4. React Redux + Immutable hands-on

  5. React App testing using Frameworks

  6. Develop App using Redux React

Working within in a dynamic, hands-on learning environment, attendees will be able to:

  1. Understand React js Framework

  2. Using React JS components and their lifecycle

  3. Using components and creating real time apps

  4. Using Routing to create single page app

  5. Using es5 and es6 to write React apps

  6. Using REdux as state container for react apps

  7. Develop Redux container components and using middlewares with Redux.

  8. Testing React Components and testing Redux layer

  9. Building and deploy application using Webpack + browserify Bundlers.

Course Structure: This program is an experiential program to develop knowledge and skills through practical examples

  • Audience & Prerequisites: Who Should Attend

Participants of this program should have good understanding of HTML & Javascript.

Workshop Topics Covered

Topics Covered

Legend: [P] – Presentation, [D] – Demo, [L] – Lab

Main 1

Getting Started with React JS

  1. What is React JS

  2. Introduction of React JS [P]

  3. JS frameworks like React Angular 2.0 [P]

  4. Quick comparison between All frameworks [P]

  5. The Purpose of Boilerplate Projects [P]

  6. Environment Setup [L]

  7. Project Setup [L]

  8. A Taste of JSX [p]

  9. A Taste of Node & NPM [L]

  10. Startup with Webpack loader & Browserify [L]

  11. A Taste of ES6 [p]

  12. A Taste of Transpilers [p]

  13. Hello World with React JS (with NPM + webpack) [L]

  14. Hello World with React JS (without NPM) [L]

Lab : Starting with Hello World with React js [L]

Fundamental Classes

  • React.createClass

  • React DOM.render

  • Render method

Lab : Creating component and rendering that on DOM Node

Creating component using ES5

  • Creating a hello world component

  • Render a Component

  • Transform JSX to ES5

  • Component Rendering on target DOM

Component building

  • Component configuration

  • Component life cycle and rendering

Lab: Implementing component Rendering using webpack transpilation

Lab: Implementing component Rendering using in browser transpile.

  • webpack [L]

  • NPM [L]

  • Installing dependency using NPM [L]

Lab : Webpack Dev server [L]

Creating NPM tasks for building app [L]

React js Fundamentals

  1. React JS Component Creation [L]

  2. Composition

  3. Unidirectional Data Flow [P]

  4. JSX using Babel REPL [L]

  5. Virtual DOM [P]

  6. createClass [L]

  7. Accessing state & props [P]

  8. Getting props.children [P]

  9. createElement [P]

  10. Lifecycle Hooks [P]

  11. Container vs Presentational Components [P]

  12. Stateless Functional Components [P]

  13. Event Handling DOM events [L]

  14. Creating Basic React Component and rendering [P]

  15. Creating Basic React Component using Create Element [P]

  16. Event Handling in React component [P]

  17. Accessing the Props Obj in React component [P]

  18. Initialize the React Component State [P]

  19. Quick Recap on Component Lifecycle

  20. Reacts JS getting data using Refs

  21. React js Creating todo app components [L]

  22. React js Creating smart Search App[L]

  23. React js Creating Shopping Cart application [L]

  24. React JS Creating Cart and Product list Components [L]

  25. React js Creating Product Component [L]

  26. React js communicate components using event $publish and $subscribe

  27. Exercise and quick Quiz [L]

Lab : Event Handling and Creating custom events using React js [L]

Understanding on Compilation and deploy

NPM and Webpack

  • Install React using NPM

  • Understanding webpack and NPM

  • Build and transpile jsx using webpack Babel

  • Rendering the jsx component on DOM Node

  • NPM tasks for webpack and webpack dev-server

Working with Components with ES5

  • Component creation

  • Component lifecycle

  • Component state creation and management

  • Component DOM event handling

  • Component communication using props and using state in components

Lab : Developing shopping cart/ Search App / Todo App

ES6 with React Components (Understanding ES6 es2015)

Learn basic of ES6 and how we can modulate our code in ES6 with React js with Module Loader and Transpilers

** All will explained with examples**

  1. Module loaders & Transpilers with ES6 Intro [P]

  2. ES6 Features [P]

  3. Let [P]

  4. Const [P]

  5. Arrow Functions [P]

  6. Default functions [P]

  7. Spread Operator [P]

  8. Rest Parameters [P]

  9. Quiz Time 01 [L]

  10. Object String & Object Assign [P]

  11. Template Strings [P]

  12. Object Destructuring [P]

  13. Concise Object Methods [P]

  14. Quiz Time 02

  15. Arrays [P]

  16. Set Map week set [P]

  17. Native ES6 Promises [P]

  18. Quiz Time 03 [L]

  19. Classes Import Export [P]

  20. Modules [P]

  21. Iterators and Generators [P]

  22. Quiz Time 04

ES6 transpilation with React component

  • ES6 components transpile using Babel [L]

  • Bundling components using Webpack [L]

  • Running examples on Chrome console [L]

Good point about ES6 to use in React

  • Introduce es6 with React components

  • Creating ES6 class with constructors

  • Using arrow function

  • ES6 module import export

This course is made up of 10 lessons. Here we are covering ES6 basic syntax and what are new concepts added in ES6 will talk about each in details with examples. After this module we will start writing our code in ES6 with React (Quick Recap of React using ES6)

Let's write React using ES6 only with Routing

  1. Advanced React using ES6 [P]

  2. introduction package.json and npm [P]

  3. Deep dive Webpack Module Loader for es6 [P]

  4. es6 classes as React component [P]

  5. es6 modules Import Export [P]

  6. es6 import and export statements [P]

  7. Stateless Components, Stateless Functional Components, and Functional Components. [L]

  8. Differences Between Component Instances and Component Classes [P]

  9. Understanding Functional Components to Class Components [L]

  10. Render Targets

  11. Applying styles to Components [L]

  12. Composing Multiple React.js Components [L]

  13. State vs Props & Application Data [L]

  14. JavaScript Events & Data Changes in React [L]

  15. React Router & Intro to Single Page Apps with React JS [L]

  16. React Router Params & Queries [L]

  17. React Inline Styles & Component Arrays [L]

  18. Exercise and quick Quiz [L]

  19. State Basics

  20. Using Refs to Access Components [L]

  21. Accessing Child Properties [L]

  22. Component Lifecycle - Mounting Basics [L]

  23. Component Lifecycle - Mounting Usage [L]

  24. Component Lifecycle - Updating [L]

  25. Higher Order Components [L]

  26. Developer Tools (Chrome tools) [L]

  27. YouTube App React JS ES6 [L] Demo

  28. Router Application Demo App [L] Demo

Application Architecture

  1. Creating components and deciding data flow architecture.

  2. Implementing lifecycle and communication between components

  3. Stateless and functional components

  4. Implementing React Routing with Router

Lab: Develop an application using React router

Let's start with Redux

  1. Redux + Immutable Middleware [P]

  2. What is Redux with difference between Redux & Flux [P]

  3. Managing App State with Redux Developing Book List App [L]

  4. Understanding the data flow pattern in Redux [P]

  5. Reducers [P]

  6. Containers - Connecting Redux to React [P]

  7. Reducers with Containers [P]

  8. Implementation of a Container Class [P]

  9. Containers and Reducers Review [P]

  10. Actions and Action Creators [L]

  11. Binding Action Creators [L]

  12. Creating an Action for App [L]

  13. Consuming Actions in Reducers [L]

  14. Conditional Rendering [L]

  15. Reducers and Actions Review [L]

Lab :- Book app to understand react-redux [L] Demo app

  1. Installing React Router [P]

  2. React Router - What is It?(push based & hash based routing) [L]

  3. Setting Up React Router [L]

  4. Route Configuration[L]

  5. Nesting Of Routes [L]

  6. Index Routes with React Router [L]

  7. App Overview and Planning (weather app) [L]

  8. Component Setup (weather app) [L]

  9. Controlled Components and Binding Context (weather app) [L]

  10. Form Elements in React [L]

  11. Working with API's [L]

  12. Introduction to Middleware(Thunk & promises )[L]

  13. Ajax Requests with Axios (REST calls) [L]

  14. Redux-Promise in Practice [L]

  15. Ajax Requests with Axios (REST calls) [L]

  16. Redux-Promise in Practice [L]

Lab : Weather App using Redux Middleware Lab

Lab :- Blog App Redux containers and Middleware with Routing Lab

Testing of React Components

  1. React App testing using Frameworks Enzyme/Jest [P]

  2. Introduction to test framework [P]

  3. Understanding TDD BDD programming. [P]

  4. Deciding test cases for React application [P]

  5. to-do list test cases [L]

  6. Exercises and solutions using Shallow and DOM rendering process [L]

  7. Exercises will be test cases for the apps done in this course [L]

  8. Test cases for demo application

  9. Exercises and solutions

PreviousStyling React ComponentNextJest and Enjyme Testing

Last updated