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