React JS Cours syllabus

JavaScript course syllabus

Ø Intoduction

Ø What is JavaScript

Ø Javascript  Features

Ø JavaScript Libraies

Ø Understanding HTML, CSS, JavaScript

Ø JavaScript Version

Ø ES5

Ø ES6/ES2015

Ø ES7/ES22016

Ø ES8/ES22017

Ø Data Types

Ø Number

Ø String

Ø Boolean

Ø Unfefined

Ø Null

Ø Variable Mutation

Ø Basic Operator

Ø Operator Precedence

Ø Shorthand Operator

Ø Problem Statement

Ø Decision making statement-if else

Ø If-else – example

Ø Comparing the problem statement soultion

Ø Switch statement – example

Ø Boolean logic

Ø Boolean logic example

Ø Ternary oprator

Ø Ternary oprator example

Ø Tips

Ø Function

Ø Function statement

Ø Function statement example

Ø What is Array

Ø Real World Problem Ecommerce

Ø Real World Problem transport

Ø Space and the Complexity

Ø Example of Array

Ø Object, When to use it

Ø Object and Methods

Ø Loops and iteration

Ø For loops

Ø Continue and Break statement

 

 

ES6 javaScript Course Syllabus

Ø History of javaScript

Ø Features

Ø Let & const and its example

Ø Arrow Funtions

Ø Alternative

Ø Tips and Arrow Function

Ø Exports and Imports

Ø Tips for Exports and Imorts

Ø Classes

Ø Classes example

Ø Inheritance

Ø Spread and rest parameter

Ø Destruting


React JS Course syllabus

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.

Ø Webpack overview

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

 

       Real – time Practicals

·       NPM installation by locally and Globally

·       Create a basic App with React JS and other supported NPM.

SECTION 5 : REACT JS FORMS AND UI

Ø List 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

 

Real – time practicles

· Create a react form.

· Client –side form validation.

· Applying form components.

· Submit and rest the form.

   SECTION 6: REACT JS COMPONENTS LIFE CYCLES OVERVIEW

Ø Initial Render

Ø Props change

Ø Stage change

Ø Component willmount

Ø Component didmount

Ø Component unmount

  Real – time practicles

· Applying Different Lifecycles in a 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 practicles

·      Create a single page application.

·      Applying routing.

·      Dynamically render the components based on the url

 

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 practicles

·      Communication 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 practicles

Ø 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 Reach-cookie overviw.

 

 

SECTION 11: FLUX , REDUX OVERVIEW

Ø What is Flux Architecture?

Ø What are the Flux Components available?

Ø Stores.

Ø Dispatchers.

Ø View Controllers.

Ø Actions.

Ø Views.

Ø How Flux Works?

Ø Flux and React works together.

Ø Introdutio to one store.

Ø Provider Componet

Ø Action

Ø 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?

Ø Reach Unit Testing overview

Ø Introdution 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

Ø httpster

Ø npm

 

SECTION : 15 HOOKS

Ø Understanding Hooks

Ø The useState hook

Ø Side effects using the useEffect hook

Ø The useContext hook

Ø Writing your own hook

 

SECTION : 16 CODE SPLITTING

Ø Code splitting & Suspense

Ø Route Vased 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 FEATURE OF REACT 16

Ø Handling exception in components

Ø Error boundaries

 

SECTION 21 : WEBPACK PRIMER AND ISOMORPHIC REACT

Ø Webpack and its use

Ø Setting up and intalling 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 rendr ToStaticMarkup and renderToString methods

 

SECTION 22 : FETCH DATA USING GRAPHQL

Ø What is GraphQL?

Ø Cons of Rest APl

Ø Pros of GraphQl

Ø Fronterd 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 APL

Ø Apollo client

Ø NPM libraries to build client side of GraphQL

Ø  How to setup Apollo client