Advertisement
  1. Code
  2. React

Entendendo Rotas Aninhadas em React

by
Read Time:5 minsLanguages:

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

React é uma biblioteca JavaScript criada pelo Facebook para criar interfaces de usuários. Se for novo no React, é bom ler um dos tutoriais anteriores, começando com React. Nesse tutorial, discutiremos como lidar com roteamento aninhado em uma aplicação web com React

Preparando o App

Começaremos preparando a aplicação web em React. Criemos uma pasta, ReactRouting, para o projeto. Dentro, criemos o arquivo app.html. Abaixo está seu conteúdo:

Dentro da pasta ReactRouting, inicializaremos o projeto usando o Node Package Manager (npm).

Digitemos os detalhes do projeto ou aperte Enter para os padrões, e devemos ter um package.json dentro da pasta.

Instalemos react e react-dom, usando npm.

Instalemos babel usando npm e salvemos no package.json.

babel é requerida para transforma código JSX em JavaScript. Criemos um arquivo de configuração do webpack. Eis como o arquivo webpack.config.js deve ficar:

app.js é o arquivo onde o código React residirá. Criemo-no dentro da pasta ReactRouting. Importemos as bibliotecas react necessárias, dentro de app.js. Criemos o componente App com uma div e algum texto. Renderizemos o componente usando o método render. Eis como o app.js deve estar:

Reiniciemos o servidor de desenvolvimento do webpack.

Após reiniciado, podemos ver o app React em http://localhost:8080/.

Lidando Com Roteamento em React

Usaremos react-router para implementar roteamento e rotas aninhadas. Primeiro, instalemos o pacote no projeto.

Agora, que temos react-router no projeto, criemos algumas visões para implementar o roteamento. Dentro de app.js, criemos dois componentes chamados view1 e view2. Eis como deve ficar:

Criemos o componente Menu para mostrar View1 e View2 ao clicar. Assim deve ser:

Usemos o react-router para mostrar a rota padrão de nossa aplicação. Façamos do componente Menu o padrão. Também definamos as rotas para os componentes View1 e View2. Eis como deve ficar:

Salvemos as mudanças e reiniciemos o servidor webpack. Devemos ter um menu de nevagação vertical em http://localhost:8080/webpack-dev-server/.

An example of the vertical navigation menuAn example of the vertical navigation menuAn example of the vertical navigation menu

Tentemos clicar nos links View1 e View2, e naveguemos aos componentes apropriados.

Rotas Aninhadas em React

Já temos um componente App para mostrar o texto do cabeçalho. Suponhamos querer que o clique do menu mostrasse a visão apropriada, mas renderizada dentro de App.

Queremos o menu de navegação disponível em todas as páginas. Para conseguir isso, teremos de aninhar nossos componentes react View1 e View2 em App. Assim, toda vez que View1 for renderizada, será mostrada dentro do componentes App.

Agora, modifiquemos a configuração do roteador e coloquemos as configurações de View1 e View2 dentro de App.

Modifiquemos App para aninhar Menu em si.

Para renderizar as rotas aninhadas em App, adicionaremos props.children em App. Passaremos props como argumento para App.

Também adicionemos o componente Home à aplicação.

Incluamos Home na lista de rotas aninhadas.

Salvemos as mudanças, reiniciemos o servidor e poderemos ver a aplicação. Cliquemos nos itens de menu listados e cada deve renderizar dentro de App ao serem clicados.

The app nested in the App componentThe app nested in the App componentThe app nested in the App component

Resumindo

Nesse tutorial, vimos como implementar rotas aninhadas em uma aplicação React usando react-router. Podemos desenvolver componentes pequenos e independentes e usar os componentes para criar aplicações maiores. Poder juntar pequenos componentes em grandes aplicações é o que realmente tornar React poderoso.

React está se tornando uma das plataformas, de verdade, para trabalhar na web. Não sem suas curvas de aprendizado e há muitos, muitos recuros para ficamos entretidos. Se buscamos mais recursos para estudos ou usar no trabalho, vejamos o que está disponível ne Envato Marketplace.

Código fonte desse tutorial está no GitHub. Diga-nos suas sugestões e pensamentos nos comentários abaixo.

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.