# Training OutLine

**Course:  React Redux ||** [**https://github.com/tkssharma/React-Internal-Workshop**](https://github.com/tkssharma/React-Internal-Workshop)

**Duration: 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/ReactCastTraining>**

* **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,**<br>

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. **Course Structure: This program is an experiential program to develop knowledge and skills through practical examples**<br>

* &#x20;**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**

**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** &#x20;

**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**

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]**<br>

**Understanding on Compilation and deploy**

&#x20;            **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 3**

**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** &#x20;

&#x20;    **\*\* 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** &#x20;

**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**

**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)**<br>

**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**

**Main 5**

**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**

**Redux with React Router**

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**

**Lab :- Shopping Cart App Demo**<br>

**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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tkssharma.gitbook.io/react-training/training-outline.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.