React 18 Online Training

React -18 with JavaScript & TypeScript

REACT INTRODUCTION

  • Overview of frameworks, libraries for client side Web applications
  • React version history
  • What’s New in React 18
  • Understanding “what” and “why” React
  • 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 HOOKS

  • Introducing Hooks
  • Hooks at a Glance
  • Using the State Hook
  • Using the Effect Hook
  • Rules of Hooks
  • Building Your Own Hooks
  • Hooks API Reference
  • Hooks FAQ

REACT COMPONENT IND ETAILS    

  • Higher Order Components
  • Passing unknown Props
  • Validating Props
  • Using References
  • React Context API
  • 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
  • Handing Errors
  • Creating/Using Axios intances

REACT ROUTING V5 and V6

  • 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

REACT MATERIAL UI

ERROR HANDLING

NEW FEATURES OF REACT 18

  • Automatic Batching
  • Transitions
  • Suspense Features
  • New Strict Mode Behaviors

UNIT TESTING IN REACT       

  • 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

DEPLOYING ON CLOUD

Firebase Deployment