ReactJS para impacientes

React é uma biblioteca JavaScript para criar interfaces gráficas complexas e reativas. Esse guia é focado nas versões React v15 to v1…

Renders an accordion menu with multiple collapsible content components. Define an component, pass it to the and remove unnecessary nodes…

Creates an alert component with prop. Define appropriate CSS styles and animations for the component’s elements. Use the hook to create…

Renders a string as plaintext, with URLs converted to appropriate elements. Use and with a regular expression to find URLs in a string…

Renders a carousel component. Use the hook to create the state variable and give it a value of (index of the first item). Use an object…

Renders a component with collapsible content. Use the hook to create the state variable with an initial value of . Use an object, , to…

Renders an element with internal state, that uses a callback function to pass its value to the parent component. Use object destructuring…

Renders a countdown timer that prints a message when it reaches zero. Use object destructuring to set defaults for the , and props. Use…

Renders a list of elements from an array of primitives. Use the value of the prop to conditionally render a or list. Use to render every…

Renders a table with rows dynamically created from an array of primitives. Render a element with two columns ( and ). Use to render every…

Renders a file drag and drop component for a single file. Create a ref called for this component. Use the hook to create the and…

Renders a textarea component with a character limit. Use the hook to create the state variable and set its value to . Create a method…

Creates a spinning loader component. Define appropriate CSS styles and animations for the component’s elements. Define the component, which…

Renders a textarea component with a word limit. Use the hook to create the and state variables and set their values to and respectively…

Renders a link formatted to send an email. Destructure the component’s props, use , and to create a element with an appropriate…

Renders a table with rows dynamically created from an array of objects and a list of property names. Use , , and to produce a array…

Renders a Modal component, controllable through events. To use the component, import only once and then display it by passing a boolean…

Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. Use to create a state…

Renders a password input field with a reveal button. Use the hook to create the state variable and set its value to . Use a to wrap both…

Renders a button that animates a ripple effect when clicked. Define some appropriate CSS styles and an animation for the ripple effect. Use…

Renders a element that uses a callback function to pass its value to the parent component. Use object destructuring to set defaults for…

Renders a slider element that uses a callback function to pass its value to the parent component. Use object destructuring to set defaults…

Renders a star rating component. Define a component, called that will render each individual star with the appropriate appearance, based on…

Renders a tabbed menu and view component. Define a component, pass it to the and remove unnecessary nodes expect for by identifying the…

Renders a tag input field. Define a component and use hook to initialize an array with tags passed as . Use on collected nodes to render…

Renders a element that uses a callback function to pass its value to the parent component. Use object destructuring to set defaults for…

Renders a ticker component. Use the hook to initialize the state variable to . Define two methods, and , that will periodically increment…

Renders a toggle component. Use the to initialize the state variable to . Use an object, , to hold the styles for individual components…

Renders a tooltip component. Use the hook to create the variable and initialize it to . Return a element that contains the that will be…

Renders a tree view of a JSON object or array with collapsible content. Use object destructuring to set defaults for certain props. Use the…

Renders an element that uses a callback function to pass its value to the parent component. Use object destructuring to set defaults for…

A hook that handles asynchronous calls. Create a custom hook that takes a handler function, . Define a reducer function and an initial state…

A hook that handles the event of clicking inside the wrapped component. Create a custom hook that takes a and a to handle the event. Use…

A hook that handles the event of clicking outside of the wrapped component. Create a custom hook that takes a and a to handle the event…

A hook that executes a callback immediately after a component is mounted. Use with an empty array as the second argument to execute the…

A hook that implements in a declarative manner. Create a custom hook that takes a and . Use the hook to initialize the and state…

A hook that implements in a declarative manner. Create a custom hook that takes a and a . Use the hook to create a for the callback…

A hook that returns a value based on a media query. Check if and exist, return if not. Use to match the given , cast its property to a…

A hook that returns if the client is online or offline. Create a function, , that uses the web API to get the online status of the client…

A hook that stores the previous state or props. Create a custom hook that takes a . Use the hook to create a for the . Use the hook to…

A hook that checks if the code is running on the browser or the server. Create a custom hook that returns an appropriate object. Use , and…

A hook that implements in a declarative manner. Create a custom hook that takes a and a . Use the hook to create a for the callback…