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.

$ node -v
$ npm5 -v

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

$ mkdir nextjs
$ cd nextjs
$ npm init -y

Configurei o package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

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

$ npm install --save next react react-dom

Criei o diretório pages

$ mkdir 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

import Router from 'next/router'

export default () => (
  <div>
    <Link href='/'>Home</Link>
    <Link href='/about'>About</Link>
    <Link href='/blog'>Blog</Link>
  </div>
)

function onClickHandler (href) {
  return (e) => {
    e.preventDefault()
    Router.push(href)
  }
}

const Link = ({ children, href }) => (
  <a href='#' onClick={onClickHandler(href)}>
    {children}
    <style jsx>{`
      a {
        margin-right: 10px;
      }
    `}</style>
  </a>
)

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

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>React on server-side</p>
  </div>
)

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

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Nextjs love you.</p>
  </div>
)

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

import { Component } from 'react'
import Header from '../components/Header'

export default class extends Component {
  static getInitialProps () {
    return { data: 'My personal blog' }
  }

  render () {
    return (
      <div>
        <Header />
        <p>{this.props.data}</p>
      </div>
    )
  }
}

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.