import React from 'react'; export default function Button(props) { return ( ); }
import React, { useState } from 'react'; import Avatar from 'react-avatar'; export default function UserProfile(props) { const [firstName, setFirstName] = useState(props.firstName); const [lastName, setLastName] = useState(props.lastName); function handleSave() { console.log(`Saving profile: ${firstName} ${lastName}`); // ... perform some action, such as sending data to a server } return (This is an example of a React Component that displays a user's profile information, such as their name and profile picture. It uses the `useState` hook to manage the component's state, and provides an `input` element to let the user update their name. When the user clicks the `Save` button, the `handleSave` function is called to perform some action, such as sending data to a server. This code might be part of a package library for managing user profiles in a web application. In both examples, we can see how React Components provide an abstraction layer for managing UI functionality and state, and how they can be reused throughout a project or even shared as a library of components.); }{firstName} {lastName}
setFirstName(e.target.value)} /> setLastName(e.target.value)} />