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).
mkdir reactRoutingApp cd reactRoutingApp npm init
Instalemos as bibliotecas react
e react-dom
no projeto.
npm install react react-dom --save
Usaremos o empacotador de módulos webpack
nesse projeto. Instalemos webpack
e o servidor de desenvolvimento dele.
npm install webpack webpack-dev-server --save-dev
Usaremos Babel para converter JSX em JavaScript. Instelamos o pacote abaixo em nosso projeto.
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
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:
module.exports = { entry: './app.js', module: { loaders: [ { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } ] }, output: { filename: 'bundle.js' } };
Agora, criaremos app.html
onde o app em React será renderizado.
<html> <head> <title>TutsPlus - React Routing Basic</title> </head> <body> <div id="app"></div> <script src="bundle.js"></script> </body> </html>
Criemos o arquivo de entrada app.js
, para o app em React.
import React from 'react'; import {render} from 'react-dom'; const App = () => { return ( <h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2> ); }; render( <App />, document.getElementById('app') );
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.
webpack-dev-server
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
.
const Navigation = () => { return ( <section> <App /> <ul> <li>{'Home'}</li> <li>{'Contact'}</li> <li>{'About'}</li> </ul> </section> ); };
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.
const About = () => { return ( <section> <h2>{'Welcome to About!'}</h2> </section> ); }; const Contact = () => { return ( <section> <h2>{'Welcome to Contact!'}</h2> </section> ); };
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.
npm install react-router --save
Importemos o react-router
no app.js
.
import {Link, Route, Router} from 'react-router';
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.
render( <Router> <Route component={Navigation} path="/" /> <Route component={About} path="/about" /> <Route component={Contact} path="/contact" /> </Router>, document.getElementById('app') );
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.
const About = () => { return ( <section> <h2>{'Welcome to About!'}</h2> <Link to="/">{'Back to Home'}</Link> </section> ); }; const Contact = () => { return ( <section> <h2>{'Welcome to Contact!'}</h2> <Link to="/">{'Back to Home'}</Link> </section> ); };
Modifiquemos o componente Navigation
para incluir links para outras telas na tela inicial.
const Navigation = () => { return ( <section> <App /> <ul> <li>{'Home'}</li> <li> <Link to="/contact">{'Contact'}</Link> </li> <li> <Link to="/about">{'About'}</Link> </li> </ul> </section> ); };
Salve as mudanças e reinicie o servidor do webpack
.
webpack-dev-server
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.