React JS 

SECTION 1: WHAT IS REACT JS?

➢ React JS Introduction

➢ Advantages of React JS

➢ Work flow of React JS

➢ Scope of React JS

SECTION 2: OVERVIEW OF JSX

➢ Introduction of Virtual DOM.

➢ Difference between JS and JSX.

➢ React Components overview

➢ Containers and components

➢ What is Child Components?

➢ What is Namespaced components?

➢ What are the JavaScript expressions available in JSX?

SECTION 3: REACT JS ENVIRONMENT SETUPS

➢ Node setup

➢ How to use NPM?

➢ How to create package.json and purpose of it?

➢ ES6 Introduction and features.

www.credosystemz.com

➢ Webpack Overview

➢ Best IDE for React JS and How to write optimized code in React JS?

➢ React JS browser plugins overview.

Real-time Practicals

• NPM Installation by locally and Globally
• Create a Basic App with React JS and other Supported NPM

SECTION 4: A REAL-TIME APPLICATION BY USING REACT JS

➢ Create a React component with JSX template.

➢ How to create Nested Components?

➢ What is React JS render?

➢ React Props overview.

➢ Introduction of Props validation with data types.

➢ Flow of States, Initialize states and update states.

Real-time Practical’s

• Create a Small React Module
• Use All the states in in the created Application.

SECTION 5: REACT JS FORMS AND UI

➢ Lists of Form components.

➢ Setup Controlled and Uncontrolled form components.

➢ Control Input elements.

➢ How to set default values on all formats of Input elements.

➢ React JS Form validations.

➢ How to write Styles?

➢ Animations overview

www.credosystemz.com

Real-time Practicals

• Create a React Form.
• Client-side form validation.
• Applying form components.
• Submit and Rest the form.

SECTION 6: REACT JS COMPONENT LIFE CYCLES OVERVIEW

➢ Initial Render

➢ Props Change

➢ Stage Change

➢ Component willMount

➢ Component didMount

➢ Component Unmount

Real-time Practicals

• Applying Different Lifecylces in the Application.
• When to choose Appropriate lifecycles.

SECTION 7: ROUTING IN REACT JS AND OTHER JS CONCEPTS

➢ Single Page Application Overview.

➢ How to configure React Router?

➢ History of Router

➢ How to Handle Conditional statement in JSX?

➢ IIFE in JSX for complex logic overview.

Real-time Practicals

• Create a Single Page Application.
• Applying Routing.
• Dynamically render the components based on the url.

www.credosystemz.com

SECTION 8: EVENT HANDLING IN JSX

➢ onBlur, onKeyUp, onChange and other useful primary events in React JS.

➢ How to Sharing events between the components?

Real-time Practicals

• Communicate Data between components.
• Applying all lists of events.

SECTION 9: HOW TO WRITE STYLES IN REACT JS?

➢ CSS and inline styles in React JS overview.

➢ Introduction to styled components

➢ Real-time Practicals

➢ Styling the application using styled component

➢ How to use Animations in the Application.

SECTION 10: REACT ROUTER WITH NAVIGATION

➢ How to Load the router library?

➢ Configure the React Router?

➢ How to Pass and receive parameters?

➢ Integration of React-cookie overview.

SECTION 11: FLUX , REDUX OVERVIEW

➢ What is Flux Architecture?

➢ What are the Flux Components available?

➢ Stores.

➢ Dispatchers.

➢ View Controllers.

➢ Actions.

➢ Views.

www.credosystemz.com

➢ How Flux works?

➢ Flux and React works together.

➢ Introduction to One Store.

➢ Provider Component

➢ Actions.

➢ Reducers.

➢ sagas

➢ Dispatchers

➢ View Controllers

➢ Selector

Real-time Practicals

• Redux application Development with Real-time Project

SECTION 12: UNIT TESTING OVERVIEW

➢ What are the necessary Tools required for Unit Testing?

➢ React Unit Testing overview

➢ Introduction to JEST.

➢ How to Test React Component?

➢ How to Test React Router?

SECTION 13: INTEGRATION WITH OTHER LIBRARIES

➢ Gulp & Browserify

➢ React with jQuery

➢ React & AJAX

SECTION 14:REACT SERVER INTEGRATION & DEPLOYMENT

➢ https

www.credosystemz.com

➢ httpster

➢ npm

SECTION : 15 HOOKS

➢ Understanding Hooks

➢ The useState hook

➢ Side effects using the useEffect hook

➢ The useContext hook

➢ The useReducer hook

➢ Writing your own hook

SECTION 16: CODE SPLITTING

➢ Code splitting & Suspense

➢ Route Based Code Splitting

➢ Lazy Loading

SECTION 17: ISOMORPHIC REACT

➢ Server Side Rendering

➢ SSR with React – Setup & Server

➢ SSR with React – The Toolchain

SECTION 18: TESTING COMPONENT

➢ Using Jest with Test Utils from React-DOM

➢ Using Jest with the React Testing Library

➢ Using Jest with Enzyme

SECTION 19: EPILOGUE

➢ The React ecosystem

SECTION 20: NEW FEATURES OF REACT 16

www.credosystemz.com

➢ Handling exceptions in components

➢ Error boundaries

SECTION 21: WEBPACK PRIMER AND ISOMORPHIC REACT

➢ Webpack and its use

➢ Setting up and installing Webpack

➢ Working with the configuration file of Webpack

➢ Working with loaders

➢ Quick word on lazy loading, code splitting, and tree shaking

➢ Setting up a hot module replacement

➢ Server-side rendering (SSR)

➢ Working with renderToStaticMarkup and renderToString methods

SECTION 22: FETCH DATA USING GRAPHQL

➢ What is GraphQL?

➢ Cons of Rest API

➢ Pros of GraphQL

➢ Frontend backend communication using GraphQL

➢ Type system

➢ GraphQL datatypes

➢ Modifiers

➢ Schemas

➢ GraphiQL tool

➢ Express framework

➢ NPM libraries to build server side of GraphQL

➢ Build a GraphQL API

➢ Apollo client

➢ NPM libraries to build client side of GraphQL

➢ How to setup Apollo

JavaScript Course Syllabus

➢ Introduction

➢ What is JavaScript?

➢ JavaScript Features

➢ JavaScript Libraries

➢ Understanding HTML, CSS, JavaScript

➢ JavaScript Version

➢ ES5

➢ ES6/ES2015

➢ ES7/ES2016

➢ ES8/ES2017

➢ Data Types

➢ Number

➢ String

➢ Boolean

➢ Undefined

➢ Null

➢ Variable Mutation

➢ Basic Operator

➢ Operator Precedence

➢ Shorthand operator

➢ Problem statement

➢ Decision making statement-if else

➢ if else – example

➢ Comparing the problem statement solution

➢ Switch statement – example

➢ Boolean logic

Boolean logic example

➢ Ternary operator

➢ Ternary operator example

➢ Tips

➢ Functions

➢ Function statement

➢ Function Statement Example

➢ What is Array

➢ Real world Problem Ecommerce

➢ Real world problem transport

➢ Space and the Complexity

➢ Built in function Complexity

➢ examples of Array

➢ Objects, When to use it

➢ Objects and Methods

➢ Loops and Iteration

➢ For Loop

➢ Continue and Break Statement

ES6 JavaScript Course Syllabus

➢ History of JavaScript

➢ Features

➢ let & const and its example

➢ Arrow Functions

➢ Alternative

➢ Tips and Arrow Functions

➢ Exports and Imports

➢ Tips for exports and imports

➢ Classes

Classes example

➢ Inheritance

➢ Spread and rest Parameter

➢ Destructing

client