An ISO 9001 : 2015 Certified Company

Opp. Satyam Theatre, Durga Bhavani Plaza, Ameerpet, Hyd-16

REACT INTRODUCTION • Manipulating the State

• Overview of frameworks, libraries for • Two way data-binding
client side Web applications • Functional (Stateless) VS Class (Stateful)
• React version history Components
• What’s New in React 18 • Between component child
• Understanding “what” and “why” React communication
• Environment Setup for React Application • Dynamically rendering contents
• Understanding NPM commands • Showing Lists, List and keys
• Using VS Code • Refs
• VS Code extensions for ES6, React
STYLING COMPONENTS
REACT ESSENTIAL FEATURES AND SYNTAX • CSS Styling
• React App Project Directory Structure • Scoping Styles using Inline Styles
• Overview of Webpack, Babel • Limitations of inline styes
• React Component Basic • Inline Styles with Radium
• Create React Component • Using Psuedo classes/media quries with
• Understanding JSX inline styles
• Limitations of JSX • CSS Modules, importing css classes
• Working with Components and Reusing • Adding Bootstrap, Semantic UI to React
Components apps
• Helloworld app in React • Using react-bootstrap, reactstrap
packages
REACT COMPONENTS , PROPS AND STATE
• Functional/Class/Pure Components DEBUGGING REACT APPS
• Understanding and using Props and State • Understanding React Error Messages
• Handling Events with methods • Handling Logical Errors,
 • 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
• Understand high order component
HTTP REQUESTS/AJAX C ALLS • Understanding mapStateToProps and
• HTTP Requests in React mapDispatchtToProps usage
• Introduction of Axios package
• HTTP GET Request, fetching & REACT MATERIAL UI
transforming data ERROR HANDLING
• HTTP POST, DELETE, UPDATE
• Handing Errors NEW FEATURES OF REACT 18
• Creating/Using Axios intances • Automatic Batching
• Transitions
REACT ROUTING V5 and V6 • Suspense Features
• Routing and SPAs • New Strict Mode Behaviors
• Setting Up the Router Package
• react-router vs react-router-dom UNIT TESTING IN REACT
• Preparing the Project For Routing • Understand the significance of unit testing
• Switching Between Pages, Routing- • Understand unit testing jargon and tools
Related Props • Unit testing react components with Jest
• The "withRouter" HOC & Route Props
 • Unit testing react components with • Setting up Hot Module Replacement
enzyme
SERVER -SIDE RENDERING WITH REACT
WEBPACK PRIMER • What is server-side rendering (SSR)?
• What is webpack • Why SSR
• Why webpack • Working with renderToString and
• Install and setup webpack renderToStaticMarkup methods
• Working with webpack configuration file
• Working with loaders DEPLOYING ON CLOUD
• Quick word on code splitting, lazy loading, • Firebase Deployment
tree shaking