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