Começando com o express-react-views

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