Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

Como Manipular Rotas no React

by
Difficulty:BeginnerLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

No tutorial anterior, começamos a trabalhar com React e JSX. Nesse, veremos como preparar e criar um app em React. Focaremos na manipulação de rotas no app em React, usando react-router.

Começando

Comecemos iniciando nosso projeto usando o Administrador de Pacotes do Node (npm).

Instalemos as bibliotecas react e react-dom no projeto.

Usaremos o empacotador de módulos webpack nesse projeto. Instalemos webpack e o servidor de desenvolvimento dele.

Usaremos Babel para converter JSX em JavaScript. Instelamos o pacote abaixo em nosso projeto.

webpack-dev-server requer um arquivo de configuração onde definiremos nossos arquivos de entrada, saída e o carregador do babel. Eis como webpack.confing.js parece:

Agora, criaremos app.html onde o app em React será renderizado.

Criemos o arquivo de entrada app.js, para o app em React.

Como vimos acima, importamos react e react-dom. Criamos um componente estático chamado App que retorna um título. A função render renderiza o componente dentro do elemento app na página app.html.

Iniciemos o server do webpack e o app deve começar a executar, e mostrar a mensagem do componente.

Use o navegador e acesse http://localhost:8080/app.html e devemos ver o app funcionando.

Criando Visões do React

Agora, já começamos nossa app em React. É hora de criar algumas visões para nossa aplicação de roteamento em React. Para ser simples, criaremos todos os componentes dentro do arquivo app.js.

Criemos um componente principal chamado navigation no app.js.

No componente Navigation acima, temos o título do app e um menu recém criado para navegar pelas diferentes telas do app. O componente é bem simples, com HTML básico. Agora, criemos as telas para Contact e About.

Acabamos de criar um componente para renderizar as telas About e Contact.

Conectando Visões Usando react-router

Para conectar as diferentes visões, usaremos o react-router. Instalaremos react-router usando npm.

Importemos o react-router no app.js.

Ao invés de especificar qual componente renderizar, definiremos rotas diferentes para nossa aplicação. Para isso, usaremos o react-router.

Definamos as rotas para as telas Home, Contact e About.

Quando o usuário visitar a rota /, o componente Navigation será renderizado, ao visitar /about o componente About será renderizado e ao visitar /contact será a vez de Contact.

Modifiquemos as telas About e Contact para adicionar um link para Home. Para relacionar telas, usaremos Link, que funciona parecido com âncoras do HTML.

Modifiquemos o componente Navigation para incluir links para outras telas na tela inicial.

Salve as mudanças e reinicie o servidor do webpack.

Acesse http://localhost:8080/app.html e veremos o app executando com roteamento básico implementado.

Resumindo

Nesse tutorial, vimos como iniciar a criação de um app em React e como conectar componentes diferentes usando react-router. Aprendemos como definir rotas e ligá-las usando react-router.

Você já usou react-router ou alguma outra biblioteca de roteamento? Compartilhe conosco suas ideias nos comentários abaixo.

Código fonte do tutorial disponível no GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.