React JS with Typescript Training

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