React
Introduction to React
- What is React?
- Why React?
- React version history
- React 16 vs React 15
- Just React – Hello World
- Using create-react-app
- Anatomy of react project
- Running the app
- Debugging first react app
Templating using JSX
- Working with React. createElement
- Expressions
- Using logical operators
- Specifying attributes
- Specifying children
- Fragments
About Components
- Significance of component architecture
- Types of components
- Functional
- Class based
- Pure
- Component Composition
Working with state and props
- 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
- Using react key prop
- Using map function to iterate on arrays to generate elements
Event handling in React
- Understanding React event system
- Understanding Synthetic event
- Passing arguments to event handlers
Understanding component lifecycle and handling errors
- Understand the lifecycle methods
- Handle errors using error boundaries
Working with forms</str
- Controlled components
- Uncontrolled components
- Understand the significance to default Value prop
- Using react ref prop to get access to DOM element
Context
- What is context
- When to use context
- Create Context
- Context.Provider
- Context.Consumer
- Reading context in class
Code-Splitting
- What is code splitting
- Why do you need code splitting
- React.lazy
- Suspense
- Route-based code splitting
ooks
- What are hooks
- Why do you need hooks
- Different types of hooks
- Using state and effect hooks
- Rules of hooks
Routing with react router
- 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
Just Redux
- What is redux
- Why redux
- Redux principles
- Install and setup redux
- Creating actions, reducer and store
Immutable.js
- What is Immutable.js?
- Immutable collections
- Lists
- Maps
- Sets
React Redux
- What is React Redux
- Why React Redux
- Install and setup
- Presentational vs Container components
- Understand high order component
- Understanding mapStateToProps and mapDispatchtToProps usage
Redux middleware
- Why redux middleware
- Available redux middleware choices
- What is redux saga
- Install and setup redux saga
- Working with Saga helpers
- Sagas vs promises
Unit Testing
- 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
- Working with plugins
- Setting up Hot Module Replacement
Isomorphic React
- What is server-side rendering (SSR)?
- Why SSR
- Working with render To String and render To StaticM arkup methods