Scribd Logo
Upload

Welcome to Scribd!

  • Tutorial

    Uploaded by

    Cândido gonçalves Antonio
    6 views70 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    6 views70 pages

    Tutorial

    Uploaded by

    Cândido gonçalves Antonio

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 70
    osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React > On this page Tutorial Bem-vindo ao tutorial! Estaremos construindo um aplicative pequeno, mas rico em recursos, que permitira que vocé acompanhe seus contatos. Esperamos que demore entre 30 e 60 minutos se vocé estiver acompanhando. OV retorted xe c OQ com a = 5 Henri Helvetica HenriHelvetica Dennis Beatty How To WebPageTest Greg Bible dit Delete yan Dahl Sarah Dayan Ceora Ford Anthony Frenner rsa Fukuzaki Michael Jackson “2s React Router Contacts Cada vez que vocé vé isso significa que precisa fazer algo no aplicativo! O resto esta ai apenas para sua informagao e compreensao mais profunda. Vamos la Configurar ntpsufreactroutercom/en/main/starttutorial ‘70 ooioas, 1348 Tutorial 6-223 Roteador React, NOTE Se nao quiser acompanhar em seu proprio aplicativo, vocé pode pular esta secao Usaremos|o Vite como nosso bundler e servidor de desenvolvimento neste tutorial. Vocé precisaré do Nodejs instalado para a ~ npn’ ferramenta de linha de comando. @ Abra seu terminal e inicialize um novo aplicativo React com npm create vite@latest nane-of-your-project -- --template react # follow prompts cd npm instell react-router-dom localforage match-sorter sort-by ‘npn run dev Vocé deverd conseguir visitar 0 URL impresso no terminal: VITE v3.0.7 ready in 175 ms > Local: — nttp://127.0.0.1:5173/ > Network: use --host to expose Temos alguns CSS pré-escritos para este tutorial para que possamos manter 0 foco no React Router. Sinta-se a vontade para julgar severamente ou escrever o seu proprio @ (Fizemos coisas que normalmente no fariamos em CSS para que a marcacao neste tutorial pudesse ser a minima possivel.) «& Copie/cole 0 CSS do tutorial encontrado aqui em” src/index.css~ Este tutorial criaré, ler, pesquisard, atualizara e excluira dados. Um aplicativo web tipico provavelmente estaria se comunicando com uma API em seu servidor web, mas vamos usar 0 armazenamento do navegador e falsificar alguma laténcia de rede para manter o foco. Nenhum desses cédigos é relevante para o React Router, entéo va em frente e copie/cole tudo «© Copie/cole 0 médulo de dados do tutorial encontrado aqui em’ src/contacts. js” Tudo que vocé precisa na pasta src sd * contacts. js", "main. jsx"e “index. css”. Vocé pode excluir qualquer outra coisa (como * App.js*e “assets”, etc) ntpsufreactroutercom/en/main/starttutorial 270 oornsi24, 13.48 Tutorial v6 22.3 Roteador React & Exclua os arquivos nao utilizados para ~ sre/“ que tudo o que resta sejam estes: FE contacts.js LK index.css main. jsx Se o seu aplicativo estiver em execucdo, ele pode explodir momentaneamente, continue @. E com isso, estamos prontos para comecar! Adicionando um roteador A primeira coisa a fazer é criar um jravegador-roteador, e configurar nossa primeira rota. Isso permitiré o roteamento do lado do cliente para nosso aplicativo web. © “main. jsx* arquivo é 0 pont de entrada. Abra-o e colocaremos o React Router na pagina. «© Crie e renderize um roteador de navegador em” main. jsx” src/main. jsx 1 import * as React from “react”; 2 import * as ReactDOM from “react-dom/client"; 3 import { 4 createBrowserkouter, 5 RouterProvider, 6} from *react-router-don"; 7 import "./index.css"; 8 9 const router = createBrowserRouter([ wf 1 path: "/", 2 elenent: , Boo} “wos 15, 16 ReactDOM. createRoot (document. getELementById("root")).render( 17 React. Stricthode> 18 39 /React.StrictMode> 2) ntpsufreactroutercom/en/main/starttutorial osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React Esta primeira rota é 0 que costumamos chamar de "rota raiz”, j4 que o restante de nossas rotas serd renderizado dentro dela. Ele servira como layout raiz da Ul, teremos layouts aninhados & medida que avancamos A rota raiz Vamos adicionar o layout global deste aplicativo. © Criar ~ src/routes” e* src/routes/root.jsx” nkdir src/routes touch src/routes/root.jsx (Se vocé nao quer ser um nerd em linha de comando, use seu editor em vez desses comandos @) & Crie o componente de layout raiz src/routes/root .jsx ntpsufreactroutercom/en/main/starttutorial 470 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React 1 export default function Root() { 2 return ( 3 ° 4
    5 6
    8 re/dive 24 25
    26
    29 39
    40
    a

    ” como rota raiz" elenent™ src/main. jsx ntpsufreactroutercom/en/main/starttutorial osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React 1 /* existing imports */ 2 import Root fron ". /routes/root™s 3 4 const router = createsrouserRouter( 5k 6 path: "/", 7 elenent: , s) 9 Ds 10 11 React0o".createRoot (docunent..getlenentsyTd(“root")) .render( 12 React. Stricthode> B 14 ¢/React..StrictMode> 36s O aplicativo deve ser parecido com isto agora. Com certeza é bom ter um designer que também saiba escrever CSS, nao é? (Obrigado Jim Jy OV ve rment xt ~ € > & © wooxsV OQ com 2 Search New Your Name Your Friend 1s React Router Contacts Tratamento de erros nao encontrados E sempre uma boa ideia saber como seu aplicativo responde aos erros no inicio do projeto, porque todos nés escrevemos muito mais bugs do que recursos ao construir um novo aplicativo! Seus usuarios nao apenas ntpsufreactroutercom/en/main/starttutorial 870 90324, 1348 Tia 622.3 |Rotador React terdo uma boa experiéncia quando isso acontecer, mas também o ajudaré durante o desenvolvimento. Adicionamos alguns links para este aplicativo, vamos ver o que acontece quando clicamos neles? «& Clique em um dos nomes da barra lateral OV ver ment x+ L € > & © wrOORSIAKOMRe 0 Q om: Unhandled 404Not “Hey Youcan provide way better UX tan tis when your ape rows ears by providing developer © your own errorElesent props on Found ‘Thrown Error! Bruto! Esta é a tela de erro padrao no React Router, agravada por nossos estilos de flex box no elemento raiz deste aplicativo &. Sempre que seu aplicativo gera um erro ao renderizar, carregar dados ou realizar mutagdes de dados, o React Router ira detecta-lo e renderizar uma tela de erro. Vamos fazer nossa propria pagina de erro & Crie um componente de pagina de erro ‘touch src/error-page.jsx src/error-page.jsx ntpsufreactroutercom/en/main/starttutorial 770 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React 1 import { useRoutetrror } fron *react-router-don"; 2 3 export default function ErrorPage() { 4 const error = useRoutetrror(); 5 console.error(error); 6 7 return ( 8

    9 10

    Sorry, an unexpected error has occurred.

    a

    2 3

    14
    5 % 1} & Defina * * como na | errorElement” rota raiz src/main. jsx 1 /* previous inports */ 2 import ErrorPage from "./error-page"; 3 4 const router = createBrowserRouter([ s 4 6 path: */*, 7 elenent: , 8 evrorclement: , 9 hb 2% Ds n 12 ReactoOM,createRoot document .getlenentByra(*root")) .render( 13 «React.StrictMode> 4 35 ¢/React.strictMode> 16 wu A pagina de erro agora deve ficar assim: ntpsufreactroutercom/en/main/starttutorial oiosi24, 13:48 “Tutorial v.22.3| Roteador React Oe Vv vie sment x + ¥ © > & O wOORSIIKOMBe OQ con Oops! Sorry, an unexpected error has occured (Bem, isso no é muito melhor. Talvez alguém tenha esquecido de pedir ao designer para criar uma pagina de erro. Talvez todo mundo se esqueca de pedir ao designer para criar uma pagina de erro e entio culpe o designer por néo ter pensado nisso Observe que[ useRoutezrror’fornece o erro que foi gerado. Quando 0 usuario navega para rotas que nao existem, vocé recebera uma resposta de erro com "Not Found” * statusText*. Veremos alguns outros erros posteriormente no tutorial e discutiremos mais sobre eles. Por enquanto, basta saber que praticamente todos os seus erros seréo tratados por esta pagina, em vez de controles giratérios infinitos, paginas que nao respondem ou telas em branco ¢' AU da rota de contato Em vez de uma pagina 404 “Nao encontrada", queremos realmente renderizar algo nos URLs aos quais vinculamos. Para isso, precisamos fazer uma nova rota. & Crie 0 médulo de rota de contato touch src/routes/contact.jsx & Adicione a IU do componente de contato ntpsufreactroutercom/en/main/starttutorial 970 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React E apenas um monte de elementos, fique a vontade para copiar/colar. src/routes/contact. jsx ntpsufreactroutercom/en/main/starttutorial osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React 1 import { Form } from “react-router-don"; 2 3 export default function Contact() { 4 const contact 5 6 7 avatar: “https://placekitten.com/g/200/200", 8 twitter: "your_handle", 9 notes: “sone notes", 10 favorite: true, a 2 3 return ( 14
    15
    16 a 2
    23 No Nanec/i> 30 rained 3 32 «yma 33 34 {contact.twitter && ( 35 <> 36 a 37 target="_blank" 38 href={*https://twitter.com/${contact.twitter}” } 39 > 40 {contact.twitter} 4a a2

    “3 » 4a 45 {contact.notes &&

    {contact notes}

    } 46 ar
    48 49 button type="submit" >Edit so 51 { 55 if ( 36 confirm 37 “please confirm you want to delete this record 58 d 9 md 68 event. preventDefault(); 61 ? 62 » 63 > oa
    67
    68
    6 di mY n 72 function Favorite({ contact }) { 2 // yes, this is a “let” for later ™ let favorite = contact. Favorites 7s return ( 76
    ” button 7 name="favorit 79 value={favorite ? “false” : “true"} 80 aria-label={ a favorite 82 2 *Renove from favorites: 83 1 "Add to favorites™ aa > as > as {favorite ? "xe" 1 "xy a7 a8
    9 ‘ 9} Agora que temos um componente, vamos conecta-lo a uma nova rota & Importe o componente de contato e crie uma nova rota src/main. jsx ntpsufreactroutercom/en/main/starttutorial osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React 1 /* existing inports */ 2 import Contact fron "./routes/contact"s 3 4 const router = createsronserRouter([ 5 6 path: "/", 7 elenent: , 8 errorElenent: , 9) wf nu path: “contacts/:contactId", 2 elenent: , B » “ys 1s 16 //* existing code */ Agora, se clicarmos em um dos links ou visitarmos, */contacts/1° obteremos nosso novo componente! OV weston x + © > ¢ © moose: Your Name * your_handle Some notes Edt Delete OQ com No entanto, nao esta dentro do nosso layout raiz ® Rotas aninhadas Queremos que o componente de contato seja renderizado dentro do ’ layout assim. ntpsufreactroutercom/en/main/starttutorial oiosi24, 13:48 “Tutorial v.22.3| Roteador React “Yves “oe . © mooxsIaIconset OQ cum Q search New Your Name * your_handle Your Name Some notes Your Fiend felt Delate 1s React Router Contacts Fazemos isso tornando a rota de contato filha da rota raiz. «@ Mova a rota de contatos para ser filha da rota raiz src/main. jsx 1 const router = createsrowserouter([ 2 ‘ 3 path: */", 4 element: , 5 errorélenent: , 6 children: [ 7 { 8 path: “contacts/:contactId", 9 element: , 10 b u L 2 b BoD) Agora vocé vera 0 layout raiz novamente, mas uma pagina em branco direita, Precisamos dizer a rota raiz onde queremos que ela renderize suas rotas filhas. Fazemos isso com | * Encontre “
    * e coloque uma tomada dentro ntpsufreactroutercom/en/main/starttutorial 1470 910824, 1348 Tutorial v6.22 | Roteador React «& Renderizar um’ ~ src/routes/root.jsx 1 import { Outlet } from *react-router-don"; 2 3 export default function Root() ( 4 return ( 5 ° 6 {/* all the other elements */} 7
    7 (/* other elenents */) 8 9 19 20 {/* other elenents */) a 2 <-> 23 % ma} Vocé pode abrir a guia rede nas ferramentas de desenvolvimento do navegador para ver se ele ndo est mais solicitando documentos. Carregando dados Segmentos de URL, layouts e dados so mais frequentemente acoplados (triplicados?). Ja podemos ver isso neste aplicativo: Segmento de URL Componente Dados / > ” lista de contatos contatos/:id ** —_contato individual Devido a esse acoplamento natural, o React Router possui convengées de dados para inserir dados facilmente nos componentes da rota Existem duas APIs que usaremos para carregar dados, ~ loader“ “useLoaderData’ . Primeiro, criaremos e exportaremos uma fungéo de carregamento no médulo raiz e, em seguida, conectaremos ela a rota, Finalmente, acessaremos e renderizaremos os dados. ntpsufreactroutercom/en/main/starttutorial 1670 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React & Exporte um carregador de* root. jsx” src/routes/root.jsx import { Outlet, Link } from “react-router-don"; import { getContacts } from *../contact: const contacts = await getContacts(); 1 2 3 4 export async function loader() { 5 6 return { contacts }; 7 & Configure o carregador na rota src/main. jsx 1 /* other inports */ 2 import Root, { loader as rootLoader } from *./routes/root"; 3 4 const router = createBrowserRouter([ 5 4 6 path: "/", 7 elenent: , 8 errorélenent: , 9 loader: rootLoader, 10 children: [ n { 2 path: “contacts/:contactid", 3 elenent: «Contact />, uw » 1s L 6} vps @& Acesse e renderize os dados src/routes/root.jsx ntpsufreactroutercom/en/main/starttutorial 1770 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React 1 import { 2 outlet, 3 Link, 4 useLoaderdata, 5 } from “react-router-dom"; 6 import { getContacts } from “../contacts"; 7 8 /* other code */ 9 10 export default function Root() { 11 const { contacts } = useLoaderdata()s 12 return ( B © “
    as 16 {/* other code */} v a
    45 ey 4 ay 0! O React Router agora manteré automaticamente esses dados sincronizados com sua IU. Ainda nao temos dados, entéo provavelmente vocé esté recebendo uma lista em branco como esta: ntpsufreactroutercom/en/main/starttutorial oiosi24, 13:48 “Tutorial v.22.3| Roteador React Oey recited = xt o © © mopxsi7s ox sod Q seareh New 12s React Router Contacts Gravagées de dados + formularios HTML Criaremos nosso primeiro contato em um segundo, mas primeiro vamos falar sobre HTML. O React Router emula a navegacao do formulario HTML como a primitiva de mutacao de dados, de acordo com o desenvolvimento web antes da explosio cambriana do JavaScript. Ele oferece os recursos de UX de aplicativos renderizados pelo cliente com a simplicidade do modelo web “old schoo Embora nao sejam familiares para alguns desenvolvedores da web, os formularios HTML, na verdade, causam uma navegagao no navegador, como clicar em um link. A tinica diferenga esta na solicitagao: os links s6 podem alterar a URL, enquanto os formularios também podem alterar 0 método da solicitagéo (GET vs POST) e 0 corpo da solicitagao (dados do formulario POST). Sem 0 roteamento do lado do cliente, o navegador serializaré os dados do formulario automaticamente e os enviara ao servidor como corpo da solicitacao para POST e como URLSearchParams para GET. O React Router faz a mesma coisa, exceto que em vez de enviar a solicitagao ao ntpsufreactroutercom/en/main/starttutorial 1970 ooioas, 1348 Tutorial 6-223 Roteador React, servidor, ele usa 0 roteamento do lado do cliente e a envia para uma rota “action” Podemos testar isso clicando no botao “Novo” em nosso aplicativo. 0 aplicativo deve explodir porque o servidor Vite nao esta configurado para lidar com uma solicitagéo POST (ele envia um 404, embora provavelmente deva ser um 405s), e282 9 woos xt ~ © © mopxsi7s ox eso ei This 127.0.0.1 page can't be found No webpage was found forthe we adres: itpft27.0.0.:8973) TRG] | Semerts Conse Souces Network Peterrance Maney Apalbaton Seay > 011 M1 & fx © 9 FO Comming CO osbecace Notting + Bt F o Fer Ci ion O Hoe és URLs A Fel2v0iR JS. CSS tng Made Font Ose WS Yam Martel Ober Ha oka cooee Blokes Requests Cd party eqs iB wzr003 POST li. eeeeent ane | atasragepngbe. GET 200g Ome Low 1 atasnagspegese... GET 200g ms Low 1 © smamagsogbace... GET 20 ang Ome Low Em vez de enviar esse POST ao servidor Vite para criar um novo contato, vamos usar 0 roteamento do lado do cliente. Criando Contatos Criaremos novos contatos exportando uma * action’ rota raiz, conectando-a a configuracao da rota e alterando-a *
    " para React Router *
    {/* other code */} post">
    {/* other code */}

    New /contacts"s 2irmo osio3i24, 13:48 1 /* other imports *, 2 3 import Root, { 4 Ieader as roottoader, 5 action as reotAction, 6) from "./routes/root™s 7 const router = createBrouserRouter([ 9 10 path: "/", n elenent: , 2 errorElenent: , 2B loader: rootLoader, 14 action: rootAction, 1s children: [ 16 < 17 path: “contacts/:contactId", 18 elenent: , 19 » 20 1 ao} 22 1s ‘Tutorial v.22.3 | Roteador React E isso! Va em frente e clique no botdo "Novo" e vocé vera um novo registro aparecer na lista 8 © V feos Rote a > © OmanxsI7s Q search No name 12+ React Router Contacts O *createContact” método apenas cria um contato vazio sem nome, dados ou qualquer coisa. Mas ainda cria um recorde, prometo! ntpsufreactroutercom/en/main/starttutorial oe eog 2270 ooinsi24, 13.48 Tutorial 6-223 Roteador React, @ Espere um pouco... Como a barra lateral foi atualizada? Para onde ligamos * action’? Onde esta o cédigo para buscar novamente os dados? Onde estao “useState’, “onSubmit”e “useEffect™ ?! E aqui que o modelo de programagao da "velha escola web" aparece. Como discutimos anteriormente, “

    ” evita que o navegador envie a solicitagao ao servidor e a envia para sua rota “action”. Na semantica da web, um POST geralmente significa que alguns dados esto mudando Por convengaio, o React Router usa isso como uma dica para revalidar automaticamente os dados na pagina apés o término da acao. Isso significa que todos os seus * useLoaderData" ganchos sao atualizados e a IU permanece sincronizada com seus dados automaticamente! Muito legal Parametros de URL em carregadores & Clique no registro Sem Nome Deveriamos ver nossa antiga pagina de contato estatica novamente, com uma diferenga: a URL agora tem um ID real para o registro. oS eer © > © O raroansirafenscswatiyae os — _ Your Name * your_handle Some rotes sat Delete 1s React Router Contacts Revendo a configuracao da rota, a rota fica assim: ntpsufreactroutercom/en/main/starttutorial 270 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React path: “contacts/:contactId", elenent: , be Lb Observe 0 * :contactId” segmento de URL. Os dois pontos (*:*) tam um significado especial, transformando-o em um “segmento dinamico". Os segmentos dindmicos corresponderao aos valores dinamicos (alteraveis) nessa posico do URL, como o ID de contato. Chamamos esses valores no URL de "URL Params" ou apenas "params", para abreviar. Eles “ params" sao passados para o carregador com chaves que correspondem ao segmento dindmico. Por exemplo, nosso segmento & nomeado * :contactId” para que o valor seja passado como * params. contactId” Esses parametros so usados com mais frequéncia para localizar um registro por ID. Vamos experimentar. & Adicione um carregador & pagina de contato e acesse os dados com” useLoaderData™ src/routes/contact. jsx 1 import { Form, useLoaderData } from “react-router-don"s 2 import { getContact } from *../contacts"; 3 4 export async function loader({ params }) { 5 const contact = await getContact(parans.contactId); 6 return { contact }; 7) a 9 export default function contact() ¢ 18 const { contact } = useLoaderData(); 11 // existing code Ry «& Configure o carregador na rota src/main. jsx ntpsufreactroutercom/en/main/starttutorial 2070 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React eyaunen n 2 3 14 1s 16 uv 18 19 28 a 2 23 /* existing code *, inport Contact, { loader as contactLoader, } from *./routes/contact™ const router = createBrowserRouter([ « path: element: , errorélement: , loader: rootLoader, action: rootAction, children: [ { pat element: , loader: contactLoader, » “contacts/:contactId", 1 Me Ds /* existing code */ COV renttone tod xt € > © © wrOOABHaIconaetswatyse search New No Name Edit Delete |e React Router Contacts ox sod Atualizando Dados ntpsufreactroutercom/en/main/starttutorial 25770 osio3i24, 13:48 “Tutorial v8.22.3 | Roteador React Assim como na criagao de dados, vocé atualiza os dados com o >”. Vamos fazer uma nova rota em contacts/:contactId/edit™ Novamente, comegaremos com 0 componente e depois o conectaremos & configuragao da rota. & Crie 0 componente de edicao touch src/routes/edit.jsx & Adicione a IU da pagina de edigéo Nada que nao tenhamos visto antes, fique 4 vontade para copiar/colar: src/routes/edit.jsx ntpsufreactroutercom/en/main/starttutorial 26770 osio3i24, 13:48 eyaunen 18 n 2 3 14 1s 16 7 48 19 28 a 2 23 24 25 26 2 28 29 30 31 32 33 34 35 36 7 38 39 40 41 42 43 44 45 46 47 48 49 50 51 ‘Tutorial v.22.3 | Roteador React import { Form, useLoaderData } from “react-router-don"; export default function Editcontact() { const { contact } = useLoaderoata(); return ( Twitter