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 ProfilePage.js . 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.

 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="[email protected]" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage;

Neste componente:

• Usamos o gancho useState para gerenciar os dados do usuário.

• O gancho useEffect busca dados do usuário de uma API simulada quando o componente é montado.

• Usamos o componente Avatar do Avatarium para exibir um avatar com tema aleatório.

• 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 ProfilePage.css e importe-o para 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é http://localhost:3000/profile para visualizar a página de perfil.

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.