, Contact Form
, Email Form
, Background Wrapper
, Tooltip Component
, Error Catcher
, List Wrapper
, Product Rating
, Shopping List
, Post Comment
, Theme Context Switcher
, Player Status
, Simple Calculator
, Toggle Options Visibility
, Cards Widget
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.
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.
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.
Event-based design patterns are very common in modern applications, especially in the development of user interfaces.
Knowing how to overcome statelessness, the intrinsic limitation of web programming, is a very important skill for a web developer.
Adding or modifying content is the most common task when developing dynamic web pages.
React Hooks allow developers to use state and other React features without writing a class. Hooks allow developers to reuse stateful logic without changing the component hierarchy.
React Context provides a way to pass data without using props through every level of the tree.
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.
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.
Data binding is a technique for synchronizing data between a component and DOM. For this reason, it’s important for all web developers.