Embrace a test-driven development (TDD) method through the usage of Jest, React Testing Library, Enzyme, and more.
8. Build efficient forms
10. Reusability and Code sharing
Explore React, understand its composition and the problems it solves when designing UIs and web applications. Get your first hands-on experience with React. Discover the create-react-app utility that builds a React development toolchain for an incredible developer experience.
What is React ?
Using the create-react-app
Build the app that allows the user to key in the text that it reverses and displays on the UI instantaneously.
Gain the knowledge of components and essentials of a React application. Start off with the 2 major types of components that can be built with React including a conceptual look at state and event listeners. Discover JSX, an HTML-like syntax that enables you to express your UI within a React component.
What are Components?
Types of Components
Design a class component that allows you to type text in a textarea field as it displays the word and character counts that notify you as you typ
Creating a Card component that you often see on social media platforms
Write a segment that acts as a list item in a UI that renders a list of booksWrite a segment that acts as a list item in a UI that renders a list of books
Understand State that allows you to specify changes to your UI using data.
Understand the fundamentals of the Hooks API that let you incorporate state in a Function component.
Learn how to use props as conduits
Know how to debug props using type checking.
Stateful Function Components with Hooks
Type Checking with Prop Types
Formulating a toggle button for a hypothetical space-craft’s guidance system panel
Creating a simple theme switcher using state in a function component
Study the UserCard component that accepts props using data
Implementing prop type checks in the UserCard
Learn to render lists of components using the map() method along with recognizing the significance of the ‘key’ attributes.
Applying the map function to render lists
The “key” attribute
Learn using the map function to render lists of components using an Array of movies, also learn to install all-important ‘key’ prop
Implementing the Fragment operator in a React Component rather than enclosing div component.
Study the lifecycle of a component and the way it can be controlled.
Know how to combine side effects like fetching data from an API, in a React component, cleaning up, and using Timers. Discover React’s synthetic event system.
Manage errors smoothly using Error Boundaries.
Lifecycle of a Component
Side effects and Lifecycle
Learn working with events and set state properties
Understand the implementation of an Error Boundary component to prevent errors in child components.
Controlled Form Components
Uncontrolled Form Components
Handle inputs effectively
Building a currency converter – Project
Learn to turn an input element into a controlled component.
Implementation of refs to pull and set data to DOM elements in case necessary.
Get hold of implementing shared logic using render props. Learn to reuse component logic using the HOC pattern.
Designing a Currency-Converter component that allows props to provide the result which is later rendered on the screen
Building a higher-order function empowering App components with tools to retrieve currency rates after conversion
Render children in a DOM node that are outside the parent’s DOM hierarchy. Learn the working of event bubbling with Portals.
Basics to Portals
Event bubbling in Portals
Work with Portals to render a dialog box component in a DOM element
Study the subtleties of data flow in a React application and the problems that occur when sharing global data using props. Study everything about Context API that allows you to share global data without using props.
Unidirectional Data Flow
Challenges encountered with Props
The API Context
Instantiate a context, and provider and consumer components to trickle data down to the component hierarchy.
Get introduced to the Hooks API and the idea behind them, learn the incorporation of stateful properties in a function component using the useState() hook. Further, learn ingesting data from a Context provider using hooks and to implement the useReducer() hook. Lastly, you shall learn to write your own hook.
Understanding of Hooks
The useState hook applications
Side effects of using the useEffect hook
The useContext hook
The useReducer hook
Write your own hook
Learn building PowerTags component that can easily be used to dynamically add/remove tags or keywords
Learn implementing useContext hook and consuming data from a context provider
Learn using the useReducer hook to offload state management and define actions and their resulting state changes
Build a custom hook named ‘useGeoLocation’ that would access the HTML5 GeoLocation API
Basics to Portals
Event bubbling in Portals
Work with Portals to render a dialog box component in a DOM element.
Use code-splitting to optimize your production bundle. Understand the implementation of code splitting, lazy loading, and suspense when working with React Router.
Suspense and Code splitting
Lazy Loading and Route Based Code Splitting
React implementation to load two components in need.
React implementation when working with React Router.
SSR with React – Setup, and Server
SSR with React – The Toolchain
Explore Redux and understand the need for a dedicated state management solution. Learn to build action creators and add mutation logic in the reducer for the Catalog component. Also get your hands on implementing middleware, async action creators, and data persistence.
State Management and Redux
Setting up Redux
Actions and Reducer for the Catalog
Using the connect() higher-order function
Actions and Reducer for the Cart
Applying Redux Hooks
Implementation of Middleware and Persistence
Understand the role of testing in application development. Further, learn to write tests using Jest and the React Testing Library. Lastly, you will gain knowledge about React Testing Library, a framework for testing React Components.
Basics to Testing
Applying Jest with Test Utils from React-DOM
Applying Jest with the React Testing Library
Applying Jest with Enzyme
Once you have mastered React, you can learn:
Here are 4 easy ways to install React :