REACT INTRODUCTION • Functional/Class/Pure Components

• Overview of frameworks, libraries for • Understanding and using Props and

client side Web applications State
• React version history • Handling Events with methods
• What’s New in React 18 • Manipulating the State
• Understanding “what” and “why” • Two way data-binding
React • Functional (Stateless) VS Class
• Environment Setup for React (Stateful) Components
Application • Between component child
• Understanding NPM commands communication
• Using VS Code • Dynamically rendering contents
• VS Code extensions for ES6, React • Showing Lists, List and keys
• Refs
REACT ESSENTIAL FEATURES AND SYNTAX
• React App Project Directory Structure STYLING COMPONENTS
• Overview of Webpack, Babel • CSS Styling
• React Component Basic • Scoping Styles using Inline Styles
• Create React Component • Limitations of inline styes
• Understanding JSX • Inline Styles with Radium
• Limitations of JSX • Using Psuedo classes/media quries
• Working with Components and with inline styles
Reusing Components • CSS Modules, importing css classes
• Helloworld app in React • Adding Bootstrap, Semantic UI to
React apps
REACT COMPONENTS , PROPS AND STATE
 • Using react-bootstrap, reactstrap • Setting Up the Router Package
packages • react-router vs react-router-dom
• Preparing the Project For Routing
DEBUGGING REACT APPS • Switching Between Pages,
• Understanding React Error Messages Routing-Related Props
• Handling Logical Errors, • The "withRouter" HOC & Route Props
• Debugging React apps using google • Passing & extracting route/query
developer tools and React DevTool parameters
• Understanding Error Boundaries • Using Switch to Load a Single Route
• Navigating Programmatically
REACT COMPONENT LIFE CYCLE
• Updating life cycle hooks REACT FORMS AND FORM VALIDATION
• PureComponents • Creating a Custom Dynamic Input
• React’s DOM Updating Strategy Component
• Returning adjacent elements • Setting Up a JS Config for the Form
• Fragments • Dynamically Create Inputs based on JS
Config
REACT HOOKS • Adding a Dropdown Component
• Introducing Hooks • Handling User Input
• Hooks at a Glance • Handling Form Submission
• Using the State Hook • Adding Custom Form Validation
• Using the Effect Hook • Fixing a Common Validation
• Rules of Hooks • Adding Validation Feedback
• Building Your Own Hooks • Showing Error Messages
• Hooks API Reference • Handling Overall Form Validity
• Hooks FAQ
DEPLOYING REACT APP TO THE WEB REACT
REACT COMPONENT IND ETAILS REDUX
• Higher Order Components • Redux principles
• Passing unknown Props • Install and setup redux
• Validating Props • Creating actions, reducer and store
• Using References • What is React Redux
• React Context API • Why React Redux
• Best practices for React Projects • Install and setup
• Demo apps • Presentational vs Container
components
HTTP REQUESTS/AJAX C ALLS • Understand high order component
• HTTP Requests in React • Understanding mapStateToProps and
• Introduction of Axios package mapDispatchtToProps usage
• HTTP GET Request, fetching &
transforming data REACT MATERIAL UI
• HTTP POST, DELETE, UPDATE ERROR HANDLING
• Handing Errors
• Creating/Using Axios intances NEW FEATURES OF REACT 18
• Automatic Batching
REACT ROUTING V5 and V6 • Transitions
• Routing and SPAs • Suspense Features
 • New Strict Mode Behaviors • Working with webpack configuration
file
UNIT TESTING IN REACT • Working with loaders
• Understand the significance of unit • Quick word on code splitting, lazy
testing loading, tree shaking
• Understand unit testing jargon and • Setting up Hot Module Replacement
tools
• Unit testing react components with SERVER -SIDE RENDERING WITH REACT
Jest • What is server-side rendering (SSR)?
• Unit testing react components with • Why SSR
enzyme • Working with renderToString and
renderToStaticMarkup methods
WEBPACK PRIMER
• What is webpack DEPLOYING ON CLOUD
• Why webpack • Firebase Deployment
• Install and setup webpack