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.

 

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

 

Tags