Começando com o express-react-views

Image for post
Image for post

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 .

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store