# 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**](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\] 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 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 5 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 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 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