Pressione enter para ver os resultados ou esc para cancelar.

Reactjs no back-end

Cada dia que se passa me surpreendo com as belezas do Reactjs, essa biblioteca fant√°stica, que me permite trabalhar no lado do servidor ūüėĪ.

Vou explicar como a m√°gica acontece:

O Next.js que √© um framework para aplicativos react que faz renderiza√ß√£o do lado do servidor(server-rendering) por padr√£o, entre muitas outras otimiza√ß√Ķes de desempenho como:

  • Divis√£o de c√≥digo autom√°tica para carregamento mais r√°pido de p√°ginas.
  • Ambiente de desenvolvimento baseado em Webpack que ofere√ßa suporte a Hot Module Replacement (HMR)
  • Capaz de implementar com o Express ou qualquer outro servidor HTTP Node.js
  • Customiz√°vel com suas pr√≥prias configura√ß√Ķes Babel e Webpack
  • Code Splitting autom√°tico com suporte a dynamic imports para importa√ß√£o de arquivos em runtime.

server-rendering‚Ää‚ÄĒ‚ÄäO servidor processa os dados solicitados, gera a p√°gina e transmite ao cliente a p√°gina pronta em HTML. O navegador l√™ o HTML e ‚Äúdesenha‚ÄĚ a p√°gina para a pessoa.

 

Hora da divers√£o

Certifique-se que o Nodejs e o NPM est√£o instalados.

 

 

Criei o diretório nextjs e o arquivo package.json:

 

 

Configurei o package.json

 

Em seguida instalei o Next.js, React e React-dom

 

 

Criei o diretório pages

 

 

pages‚Ää‚ÄĒ‚ÄäNext.js estende essa estrutura introduzindo um subdiret√≥rio de p√°ginas onde seus componentes de n√≠vel superior vivem. Com isso ele faz o mapeamento das rotas.

 

Criei o diretório components e o arquivo Header.js

 

 

Criei o arquivo em pages/index.js com o seguinte conte√ļdo:

 

 

Criei o arquivo em pages/about.js contendo este código:

 

 

Criei o arquivo em pages/blog.js contendo este código:

 

 

getInitialProps‚Ää‚ÄĒ‚Ää√Č uma √≥tima fun√ß√£o para o n√≠vel superior dos componentes (page). D√° acesso a uma s√©rie de propriedades, como a solicita√ß√£o e objetos de resposta do servidor e informa√ß√Ķes de URL.

Pronto…

Basta executar npm run dev e ir para http://localhost:3000. Para usar outra porta, você pode executar npm run dev -p <sua porta aqui>

O Nextjs me faz sentir que estou indo além, pois o front-end e o back-end estão unificados.

Espero que se inspirem para testar esse framework.

 


***
ūüď£
Estamos contratando pessoas que desenvolvam software!
Mais informa√ß√Ķes sobre a vaga.
***

Tags