, Contact Form
, Email Form
, Background Wrapper
, Toggle Options Visibility
, Player Status
, Simple Calculator
, Theme Context Switcher
, Tooltip Component
, Shopping List
, Error Catcher
, List Wrapper
, Cards Widget
, Product Rating
, Post Comment
Components are used in many frameworks and languages as the building blocks of an application.
Conditional rendering in React is rendering different components depending on the application state. It is commonly used and, as such, is important for all developers.
Many modern web frameworks provide a virtual DOM that can be used to improve performance and maintainability of large web applications - as such, it's important for web developers to have a solid understanding of how to interact with both the VDOM and DOM.
Data binding is a technique for synchronizing data between a component and DOM. For this reason, it’s important for all web developers.
Using a React Effect Hook allows you to set up a subscription to DOM changes and perform side effects.
Using a React State Hook allows you to preserve state between re-renders in a manner that doesn't require render props and higher-order components patterns, which simplifies code.
Many frameworks allow developers to add their own plugins and extensions. Hooks are the points within the framework that the developer can access to implement their own logic and designs.
Using a React Reducer Hook allows you to pass callbacks with values between components, which simplifies code by removing the need to pass callbacks through every level of a component tree.
React Context provides a way to pass data without using props through every level of the tree.
Portals are a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. As such, they are a very convenient tool for all developers who need to interact with a virtual DOM.
Knowing how to overcome statelessness, the intrinsic limitation of web programming, is a very important skill for a web developer.
Event-based design patterns are very common in modern applications, especially in the development of user interfaces.
Higher order components
Higher order components
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, they are a pattern that emerges from React’s compositional nature.
Adding or modifying content is the most common task when developing dynamic web pages.