Criar uma página de perfil no React não é apenas essencial, mas também super divertido! Ele permite que seus usuários visualizem e gerenciem suas informações pessoais com estilo. Neste tutorial, vamos construir uma página de perfil elegante usando alguns pacotes npm interessantes, incluindo Avatarium para fotos de perfil incríveis, React Router para navegação suave, Axios para busca de dados e Formik para lidar com entradas de formulário. Vamos mergulhar e fazer algo incrível! Pré-requisitos Antes de começarmos, certifique-se de ter o seguinte: Node.js e npm instalados Uma compreensão básica do React Um novo projeto React foi criado usando create-react-app Etapa 1: configure seu projeto React Primeiro, crie um novo projeto React, caso ainda não o tenha feito: npx create-react-app profile-page cd profile-page Etapa 2: instalar os pacotes npm necessários Precisaremos de vários pacotes npm para este tutorial: Avatarium: para gerar avatares com temas aleatórios React Router: para lidar com a navegação Axios: para buscar dados de uma API Formik: para lidar com o estado e validação do formulário Instale esses pacotes executando: npm install @sabfry/avatarium react-router-dom axios formik Etapa 3: configurar o roteador React Usaremos o React Router para navegar entre as diferentes páginas do nosso aplicativo. Primeiro, configure o roteador em : App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage'; function App() { return ( <Router> <Switch> <Route path="/profile" component={ProfilePage} /> </Switch> </Router> ); }export default App; Etapa 4: crie o componente da página de perfil Em seguida, crie um componente . Este componente exibirá as informações do perfil do usuário, incluindo avatar, nome e e-mail, e permitirá que o usuário atualize suas informações usando um form.jsx. ProfilePage.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Avatar from '@sabfry/avatarium'; import { Formik, Form, Field } from 'formik'; const ProfilePage = () => { const [user, setUser] = useState(null); useEffect(() => { axios.get('https://api.example.com/user') .then(response => setUser(response.data)) .catch(error => console.error('Error fetching user data:', error)); }, []); if (!user) return <div>Loading...</div>; return ( <div className="profile-page"> <h1>Profile Page</h1> <div className="profile-info"> <Avatar theme="blobs" /> <h2>{user.name}</h2> <p>{user.email}</p> <Formik initialValues={{ name: user.name, email: user.email }} onSubmit={(values, { setSubmitting }) => { axios.post('https://api.example.com/user/update', values) .then(response => { setUser(response.data); setSubmitting(false); }) .catch(error => { console.error('Error updating user data:', error); setSubmitting(false); }); }} > {({ isSubmitting }) => ( <Form> <div> <label htmlFor="name">Name</label> <Field id="name" name="name" placeholder="John Doe" /> </div> <div> <label htmlFor="email">Email</label> <Field id="email" name="email" placeholder="john.doe@example.com" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage; Neste componente: Usamos o gancho para gerenciar os dados do usuário. useState O gancho busca dados do usuário de uma API simulada quando o componente é montado. useEffect Usamos o componente do Avatarium para exibir um avatar com tema aleatório. Avatar Formik é usado para lidar com o estado e a validação do formulário, facilitando o gerenciamento de entradas de formulário e o tratamento de envios. Etapa 5: estilizando a página de perfil Adicione um pouco de CSS básico para estilizar a página de perfil. Crie um arquivo e importe-o para . ProfilePage.css ProfilePage.js /* ProfilePage.css */ .profile-page { display: flex; flex-direction: column; align-items: center; padding: 20px; } .profile-info { display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #f9f9f9; }.profile-info div { margin-bottom: 10px; }button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }button:disabled { background-color: #c0c0c0; cursor: not-allowed; } Importe este arquivo CSS para seu : ProfilePage.js import './ProfilePage.css'; Etapa 6: executando seu aplicativo Por fim, execute seu aplicativo para ver a página de perfil em ação: npm start Navegue até para visualizar a página de perfil. http://localhost:3000/profile Conclusão Neste tutorial, construímos uma página de perfil simples usando React, Avatarium, React Router, Axios e Formik. Esta página busca dados do usuário em uma API e os exibe junto com um avatar gerado aleatoriamente, e permite ao usuário atualizar suas informações usando um formulário. Você pode expandir este exemplo adicionando mais recursos, como campos adicionais para informações do usuário, regras de validação para o formulário e estilo aprimorado.
