Começando com o express-react-views

Henrique Melanda
Aug 31, 2018 · 2 min read

Para quem não conhece o express-react-views ele é um mecanismo de visualização Express que renderiza os componentes React no servidor.

Ele renderiza a marcação estática e não suporta a montagem dessas visualizações no cliente.

Ele destina-se a ser usado como um substituto para as soluções existentes de visualização do lado do servidor, como jade, ejs, ou handlebars.

Primeiro vamos criar uma pasta e executar o npm nela, você pode fazer isso via terminal.

// criando a pasta
mkdir myapp
// acessando a pasta
cd myapp
// executando npm
npm init

Agora vamos instalar as dependências express, express-react-views, react e react-dom no projeto.

npm install --save express express-react-views react react-dom

Agora a parte divertida, crie um arquivo chamado app.js.

Nesse arquivos vamos importar as dependências, inicializar o express, setar as variáveis ‘view engine’, caminhos das views e rotas

// importar os módulos
const express = require('express');
const { createEngine } = require('express-react-views');
// iniciar o objeto do express
const app = express();
// Escolhendo a porta do servidor
const port = 3000;
// setando o local a onde vai ficar os arquivos da views
app.set('views', __dirname + '/views');
// setando as variáveis 'view engine'
app.set('view engine', 'jsx');
app.engine('jsx', createEngine());
// Configurando as rotas
// Nesse caso estamos falando para o servidor
// que quando acessar a home do site vai chamar o arquivo index.jsx
// que esta dentro da pasta views
app.get('/', (req, res, next) => {
res.render('index.jsx');
});
// parametrizar a porta de escuta
app.listen((process.env.PORT || port), () => console.log(`\uD83C\uDF0F runing at http://localhost${port}`));

Agora vamos criar o arquivo index.jsx que vai ser a nossa view da home da aplicação.

// criando a pasta
mkdir views
// criando o arquivo
touch index.jsx

e cole esse código dentro do arquivo index.jsx

const React = require('react');class HelloWorld extends React.Component {
render() {
return <div>Olá, essa página está usando o express-react-views</div>;
}
}
module.exports = HelloWorld;

Agora, para finalizar, vamos rodar nossa aplicação: dentro da pasta myapp que criamos, execute o comando no terminal.

node app.js

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter .

Henrique Melanda

Written by

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade