Naresh i Technologies

React JS with Typescript Training

—

by

webmaster
in

React JS with Typescript Training

ES6

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 web pack
  • Configuring Webpack & Dev Environment
  • Setup Babel with Webpack

UNDERSTANDING ES6  FE ATURES  

  • 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

CLASSES & PROTOTYPES     

  • Classes & objects
  • Inheriting classes
  • Classes & Prototypes

ES6 GENERATORS     

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

 ES6 MODULES          

REACT 16.8 (WITH REDUX)

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
  • Parent-Child Communication
  • Dynamically rendering contents
  • Showing Lists, List and keys

 STYLING COMPONENTS      

  • CSS Styling
  • Scoping Styles using Inline Styles
  • Limitations of inline styles
  • Inline Styles with Radium
  • Using Pseudo classes/media queries 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 COMPONENT IN D 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 C ALLS         

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

 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 “without” 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

UNIT TESTING IN REAC T      

  • Understand the significance of unit testing
  • Understand unit testing jargon and tools
  • Unit testing react components with Jest
  • Unit testing react components with enzyme

WEBPACK PRIMER    

  • What is webpack
  • Why webpack
  • Install and setup webpack
  • Working with webpack configuration file
  • Working with loaders
  • Quick word on code splitting, lazy loading, tree shaking
  • Setting up Hot Module Replacement

SERVER -SIDE RENDERING WITH REACT     

  • What is server-side rendering (SSR)?
  • Why SSR
  • Working with renderToString and renderToStaticMarkup methods