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:
1 |
<html>
|
2 |
|
3 |
<head>
|
4 |
<title>TutsPlus - React Nested Routing</title> |
5 |
</head>
|
6 |
|
7 |
<body>
|
8 |
<div id="app"></div> |
9 |
<script src="bundle.js"></script> |
10 |
</body>
|
11 |
|
12 |
</html>
|
Dentro da pasta ReactRouting, inicializaremos o projeto usando o Node Package Manager (npm).
1 |
npm init |
Digitemos os detalhes do projeto ou aperte Enter para os padrões, e devemos ter um package.json dentro da pasta.
1 |
{
|
2 |
"name": "reactroutingapp", |
3 |
"version": "1.0.0", |
4 |
"description": "", |
5 |
"main": "app.js", |
6 |
"scripts": { |
7 |
"test": "echo \"Error: no test specified\" && exit 1" |
8 |
},
|
9 |
"author": "", |
10 |
"license": "ISC" |
11 |
}
|
Instalemos react e react-dom, usando npm.
1 |
npm install react react-dom --save |
Instalemos babel usando npm e salvemos no package.json.
1 |
npm install --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-react babel-preset-es2015 |
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:
1 |
module.exports = { |
2 |
entry: './app.js', |
3 |
|
4 |
output: { |
5 |
filename: 'bundle.js', |
6 |
},
|
7 |
|
8 |
module: { |
9 |
loaders: [ |
10 |
{ exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } |
11 |
]
|
12 |
}
|
13 |
}
|
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:
1 |
import React from 'react' |
2 |
import { render } from 'react-dom' |
3 |
|
4 |
const App = () => { |
5 |
return ( |
6 |
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2> |
7 |
);
|
8 |
};
|
9 |
|
10 |
render(( |
11 |
<App /> |
12 |
),document.getElementById('app')) |
Reiniciemos o servidor de desenvolvimento do webpack.
1 |
webpack-dev-server |
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.
1 |
npm install react-router --save |
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:
1 |
const View1 = () => { |
2 |
return( |
3 |
<h3>{'Welcome to View1'}</h3> |
4 |
);
|
5 |
};
|
6 |
|
7 |
const View2 = () => { |
8 |
return( |
9 |
<h3>{'Welcome to View2'}</h3> |
10 |
);
|
11 |
};
|
Criemos o componente Menu para mostrar View1 e View2 ao clicar. Assim deve ser:
1 |
const Menu = () => { |
2 |
return( |
3 |
<section> |
4 |
|
5 |
<ul> |
6 |
<li>{'Home'}</li> |
7 |
<li> |
8 |
<Link to="/view1">{'View1'}</Link> |
9 |
</li> |
10 |
<li> |
11 |
<Link to="/view2">{'View2'}</Link> |
12 |
</li> |
13 |
</ul> |
14 |
</section> |
15 |
)
|
16 |
};
|
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:
1 |
render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={Menu} path="/"></Route> |
4 |
<Route component={View1} path="/view1"></Route> |
5 |
<Route component={View2} path="/view2"></Route> |
6 |
</Router>, |
7 |
document.getElementById('app')); |
Salvemos as mudanças e reiniciemos o servidor webpack. Devemos ter um menu de nevagação vertical em http://localhost:8080/webpack-dev-server/.
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.
1 |
render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={App} path="/"> |
4 |
<Route component={View1} path="/view1"></Route> |
5 |
<Route component={View2} path="/view2"></Route> |
6 |
</Route> |
7 |
</Router>, |
8 |
document.getElementById('app')); |
Modifiquemos App para aninhar Menu em si.
1 |
const App = () => { |
2 |
return ( |
3 |
<div> |
4 |
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2> |
5 |
<Menu /> |
6 |
</div> |
7 |
);
|
8 |
};
|
Para renderizar as rotas aninhadas em App, adicionaremos props.children em App. Passaremos props como argumento para App.
1 |
const App = (props) => { |
2 |
return ( |
3 |
<div> |
4 |
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2> |
5 |
<Menu /> |
6 |
{props.children} |
7 |
</div> |
8 |
);
|
9 |
};
|
Também adicionemos o componente Home à aplicação.
1 |
const Home = () => { |
2 |
return( |
3 |
<div> |
4 |
<h3>{'Welcome Home !!'}</h3> |
5 |
</div> |
6 |
|
7 |
);
|
8 |
};
|
Incluamos Home na lista de rotas aninhadas.
1 |
render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={App} path="/"> |
4 |
<Route component={Home} path="/home"></Route> |
5 |
<Route component={View1} path="/view1"></Route> |
6 |
<Route component={View2} path="/view2"></Route> |
7 |
</Route> |
8 |
</Router>, |
9 |
document.getElementById('app')); |
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.
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.
By
