Share Description
In this course, you will :
- Learn about both the fundamentals and the advanced aspects of React.
- Redux is one of React's best state management libraries.
- You will learn some of React's most complex concepts, such as Hooks, Routing, and Internationalization, among others.
Syllabus :
1. Introduction
- How Did React Come into Existence?
- Into the Deep End
- React Elements
- Tools and Setup
- Zero Config Setup
2. Introduction to ES2015+
- The "New" Javascript
- Variable Declarations with let and const
- Arrow Functions
- New String and Array Methods
- Objects
- Classes
- Spread Operator
- Destructuring
- Rest Operator
- Template Strings
- Promises
- Asynchronous Functions with async / await
- Import Syntax and JavaScript Modules
3. JSX – an Introduction
- JSX as an Important Building Block in React Development
- Expressions in JavaScript
- What Else You Should Know
4. Rendering of Elements and Components in React
- Rendering of Elements
- The Two Types of React Components
- Component Composition: Multiple Components in One
- Dividing Components - Keeping an Overview
- Props - Receiving Data in a Component
- Pure Functions in Detail
5. State and Lifecycle Methods
- Our First Stateful Component
- Changing State with this.setState()
- Lifecycle Methods
- Lifecycle Methods in Practice
- The Combination of state and props
- The Role of Lifecycle Methods in Combination with Components
6. Event Handling
- Differences Between the React Event Handlers and the Native Event
- Scopes in Event Handlers
- The SyntheticEvent Object
7. Forms
- Uncontrolled Components
- Controlled Components
- Changing of Values
8. Lists, Fragments, and Conditional Rendering
- Lists
- Fragments
- Conditional Rendering
- Custom render() Methods and Components
9. CSS and Styling
- Styling with the Style Attribute
- Using CSS Classes in JSX
- Modular CSS with CSS Modules
- CSS-in-JS - Moving Styles Into Javascript
10. Higher Order Components
- Implementing a Higher Order Component
- Exercise
11. Functions as a Child and Render Props
- Functions as a child
- Render Props
- Render Props, Function as a Child, and Higher Order Components
12. Context API
- API
- Usage of Multiple Contexts
- contextType
- Performance Issues
13. Refs
- String Refs
- Callback Refs
- Refs Via createRef()
- Ref Forwarding
14. Error Boundaries
- Implementing an Error Boundary
- Error Boundaries in Practice
15. Portals
- Creating Portals
- Portals and Their Relationship to Their Parent Component
16. Code Splitting
- Using Dynamic Imports
- Display Fallbacks with React.Suspense
17. Typechecking with PropTypes, Flow, and TypeScript
- PropTypes
- Flow
- TypeScript
18. React Hooks – an Introduction
- Built-in Hooks
- Managing State with useState()
- Adding Side Effects with useEffect()
- Accessing Context with useContext()
19. Hooks in Action
- Implement Your Own Hooks
- Working with Data in Hooks
20. The Hooks API
- useState
- useEffect
- useContext
- useReducer
- Reducers in Practice
- useCallback
- useMemo
- useRef
- useLayoutEffect
- useDebugValue
- useImperativeHandle
21. Routing in React
- Routing
- Defining Routes
- Limit Matching Between Path and the URL
- Parameters in URLs
- Controlling Redirects of Particular Routes
- Using Router Props
- Navigating Different Routes
- Connecting Components with a Router Using Higher-order Component
- React Router and Hooks
22. State Management
- Introduction to State Management
- Introduction to Redux
- Store, Actions, and Reducers
- Creating a Store
- Action Creators vs. Actions
- Complex Reducers
- Asynchronous Actions
- Typical Asynchronous Action Example
- Debugging Using the Redux DevTools
- Using Redux with React
- mapStateToProps
- mapDispatchToProps
- mergeProps
- Fourth Parameter for connect()
- Combining the Puzzle Pieces
- Redux with React Hooks
23. Internationalization
- Setup of i18next
- withTranslation() Higher-order Component
- useTranslation() Hook
- Complex Translations Using the Trans Component
