React JS Course

KhalsaSoft

react-js-course

    Introduction to React Js

  • What is React?
  • Why React and advantages?
  • React version history
  • React 18 advantages
  • Using create-react-app
  • Anatomy of react project
  • Running the app
  • Debugging first react app
  • Templating using JSX

  • React js way of working

  • orking with React. createElement
  • xpressions
  • sing logical operators
  • pecifying attributes
  • pecifying children
  • ragments
  • bout Components

  • React js architecture functionality

  • Significance of component architecture
  • Types of components
  • Functional
  • Class based
  • Pure
  • Component Composition
  • Working with state and props

  • In React js how to handle data?

  • What is state and it significance
  • Read state and set state
  • Passing data to component using props
  • Validating props using propTypes
  • Supplying default values to props using defaultProps
  • Rendering lists

  • In React js How to render the data?

  • Using react key prop
  • Using map function to iterate on arrays to generate elements
  • Event handling in React js

  • How to handle event and pass data in react js?

  • Understanding React event system
  • Understanding Synthetic event
  • Passing arguments to event handlers
  • Understanding component lifecycle and handling errors

  • How to handle form and errors in react js?

  • Understand the lifecycle methods
  • Handle errors using error boundaries
  • Working with forms

  • How to work with componets?

  • Controlled components
  • Uncontrolled components
  • Understand the significance to default Value prop
  • Using react ref prop to get access to DOM element
  • Context

  • How manage gobal scope data in react js?

  • What is context
  • When to use context
  • Create Context
  • Context.Provider
  • Context.Consumer
  • Reading context in class
  • Code-Splitting
  • How to manage the performance in react js

  • What is code splitting
  • Why do you need code splitting
  • React.lazy
  • Suspense
  • Route-based code splitting

  • What is Hooks in react js? and working with it

  • What are hooks
  • Why do you need hooks
  • Different types of hooks
  • Using state and effect hooks
  • Rules of hooks
  • Routing with react router

  • What is react routing?

  • Setting up react router
  • Understand routing in single page applications
  • Working with BrowserRouter and HashRouter components
  • Configuring route with Route component
  • Using Switch component to define routing rules
  • Making routes dynamic using route params
  • Working with nested routes
  • Navigating to pages using Link and NavLink component
  • Redirect routes using Redirect Component
  • Using Prompt component to get consent of user for navigation
  • Path less Route to handle failed matches

  • How to manage centerised data in react js?

  • What is redux
  • Why redux
  • Redux principles
  • Install and setup redux
  • Creating actions, reducer and store

  • What is Immutable.js?.

  • Uses of Immutable.js
  • Immutable collections
  • Lists
  • Maps
  • Sets
  • React Redux

  • How to manage the common code for component?

  • Presentational vs Container components
  • Understand high order component
  • Understanding mapStateToProps and mapDispatchtToProps usage
  • Redux middleware

  • How redux can be use as middleware?.

  • Why redux middleware
  • Available redux middleware choices
  • What is redux saga
  • Install and setup redux saga
  • Working with Saga helpers
  • Sagas vs promises

  • How we can do Unit Testing in react js

  • Understand the significance of unit testing
  • Understand unit testing jargon and tools
  • Unit testing react components with Jest
  • Unit testing react components with enzyme

  • What is webpack?

  • Why webpack in react js?.
  • Install and setup webpack
  • Working with webpack configuration file
  • Working with loaders
  • Working with plugins
  • Setting up Hot Module Replacement

  • What is Isomorphic React

  • What is server-side rendering (SSR)?
  • Why SSR
  • Working with render To String and render To StaticM arkup methods