React JS Training Syllabus

JAVASCRIPT LANGUAGE ESSENTIALS

• JavaScript revision, Objects, Functions
• Arrays & Array Methods
• Array.from(), Array.of(), Array.find()
• Array.findIndex (),Array.some(), Array.every()

SETTING UP ES6 DEVELOPMENT ENVIRONMENT

• Overview of ES6, Babel, Webpack
• What/Why Babel, How babel works
• What/Why Webpack, benefits of webpack
• Configuring Webpack & Dev Environment
• Setup Babel with Webpack

UNDERSTANDING ES6 FEATURES

• New ES6 Syntax
• Let, Var & Const keyword
• Control with Block Scoping
• Spread operator & Rest Parameters
• Object & Array destructuring
• Arrow Functions
• Map & Filter method
• ES6 built-in-methods
• String literal
• ES6 MODULES

CLASSES & PROTOTYPES

• Classes & objects
• Inheriting classes
• Classes & Prototypes

ES6 GENERATORS

• Defining a generator
• Generators vs iterators
• Promises
• & Await
• Ajax calls

REACT INTRODUCTION

• Overview of frameworks, libraries for client side Web applications
• React version history
• React 16 vs React 15
• Understanding "what" and "why" React
• React Component Demonstration using codepen
• Environment Setup for React Application
• Understanding NPM commands
• Using VS Code
• VS Code extensions for ES6, React

REACT ESSENTIAL FEATURES AND SYNTAX

• React App Project Directory Structure
• Overview of Webpack, Babel
• React Component Basic
• Create React Component
• Understanding JSX
• Limitations of JSX
• Working with Components and Reusing Components
• Helloworld app in React

REACT COMPONENTS , PROPS AND STATE

• Functional/Class/Pure Components
• Understanding and using Props and State
• Handling Events with methods
• Manipulating the State
• Two way data-binding
• Functional (Stateless) VS Class (Stateful) Components
• Between component child communication
• Dynamically rendering contents
• Showing Lists, List and keys
• Refs

STYLING COMPONENTS

• CSS Styling
• Scoping Styles using Inline Styles
• Limitations of inline styes
• Inline Styles with Radium
• Using Psuedo classes/media quries with inline styles
• CSS Modules, importing css classes
• Adding Bootstrap, Semantic UI to React apps
• Using react-bootstrap, reactstrap packages

DEBUGGING REACT APPS

• Understanding React Error Messages
• Handling Logical Errors
• Debugging React apps using google developer tools and React DevTool
• Understanding Error Boundaries

REACT COMPONENT LIFE CYCLE

• Updating life cycle hooks
• PureComponents
• React’s DOM Updating Strategy
• Returning adjacent elements
• Fragments
• React memo forwardref

REACT COMPONENT IN DETAILS

• Higher Order Components
• Passing unknown Props
• Validating Props
• Using References
• React Context API
• Updated LifeCycle hooks (16.3)
• Best practices for React Projects
• Demo apps

HTTP REQUESTS/AJAX CALLS

• HTTP Requests in React
• Introduction of Axios package
• HTTP GET Request, fetching & transforming data
• HTTP POST, DELETE, UPDATE
• Handing Errors
• Adding/Removing Interceptors
• Creating/Using Axios intances

REACT ROUTING

• Routing and SPAs
• Setting Up the Router Package
• react-router vs react-router-dom
• Preparing the Project For Routing
• Switching Between Pages, Routing-Related Props
• The "withRouter" HOC & Route Props
• Passing & extracting route/query parameters
• Using Switch to Load a Single Route
• Navigating Programmatically

REACT FORMS AND FORM VALIDATION

• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Adding a Dropdown Component
• Handling User Input
• Handling Form Submission
• Adding Custom Form Validation
• Fixing a Common Validation
• Adding Validation Feedback
• Showing Error Messages
• Handling Overall Form Validity

DEPLOYING REACT APP TO THE WEB REACT REDUX

• Redux principles
• Install and setup redux
• Creating actions, reducer and store
• What is React Redux
• Why React Redux
• Install and setup
• Presentational vs Container components
• Understand high order component
• Understanding mapStateToProps and mapDispatchtToProps usage

REDUX SAGA (REDUX MIDDLEWARE)

• Why redux middleware
• Available redux middleware choices
• What is redux saga
• Install and setup redux saga
• Working with Saga helpers
• Sagas vs promises
• Redux Forms

REACT HOOKS