React JS Training 30 Hours Course

//Edit ✏️
reactjshookscontextredux

All About React JS 150+ Videos

React 30 Hours Training

Course: React Redux Duration: 40 hours with demos and hands-on labs Focus: React Redux , ES6,ES5,React testing , Redux state container, React with ES5/ES6 , Module bundlers and transpilers with hands-on example Targeted Audience: Format: This course combines lecture, discussion and demonstrations with hands-on labs. Language / Tools: Javascript, Sublime, Node,Git

React js course has been designed for Client- Side Developer, Web Developer, Web Designers.

https://github.com/tkssharma/React-Internal-Workshop

Course Objectives: What You’ll Learn

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,

The objective is End to end development training to enable associate to build a full-fledged application with React + Redux + Redis + micro-services, Redux Store, Redux Thunk and Redux promises We will talk about ES5/ES6 transpilers and hands-on on React application with Routing and different npm packages for building application

  • React.js Fundamentals with ES6 & Web pack with Code examples
  • React Redux + Immutable hands-on
  • React App testing using Frameworks
  • Develop App using Redux React

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

Understand React js Framework Using React JS components and their lifecycle Using components and creating real-time apps Using Routing to create a single-page app Using es5 and es6 to write React apps Using Redux as state container for react apps Develop Redux container components and using middlewares with Redux. Testing React Components and testing Redux layer Building and deploying applications 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 a good understanding of HTML & Javascript. Workshop Topics Covered

Topics Covered

  • Legend: [P] — Presentation, [D] — Demo, [L] — Lab
  • Main 1
  • Getting Started with React JS
  • What is React JS
  • Introduction of React JS [P]
  • JS frameworks like React Angular 2.0 [P]
  • Quick comparison between All frameworks [P]
  • The Purpose of Boilerplate Projects [P]
  • Environment Setup [L]
  • Project Setup [L]
  • A Taste of JSX [p]
  • A Taste of Node & NPM [L]
  • Startup with Webpack loader & Browserify [L]
  • A Taste of ES6 [p]
  • A Taste of Transpilers [p]
  • Hello World with React JS (with NPM + webpack) [L]
  • 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]

Main 2

  • React js Fundamentals
  • React JS Component Creation [L]
  • Composition
  • Unidirectional Data Flow [P]
  • JSX using Babel REPL [L]
  • Virtual DOM [P]
  • createClass [L]
  • Accessing state & props [P]
  • Getting props.children [P]
  • createElement [P]
  • Lifecycle Hooks [P]
  • Container vs Presentational Components [P]
  • Stateless Functional Components [P]
  • Event Handling DOM events [L]
  • Creating Basic React Component and rendering [P]
  • Creating Basic React Component using Create Element [P]
  • Event Handling in React component [P]
  • Accessing the Props Obj in React component [P]
  • Initialize the React Component State [P]
  • Quick Recap on Component Lifecycle
  • Reacts JS getting data using Refs
  • React js Creating todo app components [L]
  • React js Creating smart Search App[L]
  • React js Creating Shopping Cart application [L]
  • React JS Creating Cart and Product list Components [L]
  • React js Creating Product Component [L]
  • React js communicate components using event $publish and $subscribe
  • Exercise and quick Quiz [L]
  • Lab : Event Handling and Creating custom events using React js [L]

Main 3

  • 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

Main 4

  • 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

  • Advanced React using ES6 [P]

  • introduction package.json and npm [P]

  • Deep dive Webpack Module Loader for es6 [P]

  • es6 classes as React component [P]

  • es6 modules Import Export [P]

  • es6 import and export statements [P]

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

  • Differences Between Component Instances and Component Classes [P]

  • Understanding Functional Components to Class Components [L]

  • Render Targets

  • Applying styles to Components [L]

  • Composing Multiple React.js Components [L]

  • State vs Props & Application Data [L]

  • JavaScript Events & Data Changes in React [L]

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

  • React Router Params & Queries [L]

  • React Inline Styles & Component Arrays [L]

  • Exercise and quick Quiz [L]

  • State Basics

  • Using Refs to Access Components [L]

  • Accessing Child Properties [L]

  • Component Lifecycle — Mounting Basics [L]

  • Component Lifecycle — Mounting Usage [L]

  • Component Lifecycle — Updating [L]

  • Higher Order Components [L]

  • Developer Tools (Chrome tools) [L]

  • YouTube App React JS ES6 [L] Demo

  • Router Application Demo App [L] Demo

Main 5

  • Application Architecture

  • Creating components and deciding data flow architecture.

  • Implementing lifecycle and communication between components

  • Stateless and functional components

  • Implementing React Routing with Router

  • Lab: Develop an application using React router

Main 6

  • Let’s start with Redux

  • Redux + Immutable Middleware [P]

  • What is Redux with difference between Redux & Flux [P]

  • Managing App State with Redux Developing Book List App [L]

  • Understanding the data flow pattern in Redux [P]

  • Reducers [P]

  • Containers — Connecting Redux to React [P]

  • Reducers with Containers [P]

  • Implementation of a Container Class [P]

  • Containers and Reducers Review [P]

  • Actions and Action Creators [L]

  • Binding Action Creators [L]

  • Creating an Action for App [L]

  • Consuming Actions in Reducers [L]

  • Conditional Rendering [L]

  • Reducers and Actions Review [L]

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

Main 7

  • Redux with React Router

  • Installing React Router [P]

  • React Router — What is It?(push based & hash based routing) [L]

  • Setting Up React Router [L]

  • Route Configuration[L]

  • Nesting Of Routes [L]

  • Index Routes with React Router [L]

  • App Overview and Planning (weather app) [L]

  • Component Setup (weather app) [L]

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

  • Form Elements in React [L]

  • Working with API’s [L]

  • Introduction to Middleware(Thunk & promises )[L]

  • Ajax Requests with Axios (REST calls) [L]

  • Redux-Promise in Practice [L]

  • Ajax Requests with Axios (REST calls) [L]

  • Redux-Promise in Practice [L]

  • Lab : Weather App using Redux Middleware Lab

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

  • Lab :- Shopping Cart App Demo

Main 8

  • Testing of React Components

  • React App testing using Frameworks Enzyme/Jest [P]

  • Introduction to test framework [P]

  • Understanding TDD BDD programming. [P]

  • Deciding test cases for React application [P]

  • to-do list test cases [L]

  • Exercises and solutions using Shallow and DOM rendering process [L]

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

  • Test cases for the demo application

  • Exercises and solutions

Comments