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

Entendendo Rotas Aninhadas em React

by
Difficulty:IntermediateLength:ShortLanguages:

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