Reactjs on Rails

Maurício Linhares / @mauriciojr

Quem?

• Technical Lead at Neat.com - Philadelphia, PA
• JavaScript hater

Rails?

ReactJS?

• Pouca magia
• Focado somente no client-side
• Poucos conceitos novos, é JavaScript (quase) puro e pronto
• Rápido

O que precisamos pra começar?

• Ruby e Rails
• NodeJS e npm

No seu Gemfile

gem "browserify-rails"

No seu application.rb

config.assets.paths << Rails.root.join('node_modules')
config.browserify_rails.commandline_options =
  '-t [babelify --stage 2 --optional react]'

Posso usar Reactjs sem babeljs ou transpilers?

Pode, mas você não quer fazer isso. O esforço não vale a pena.

Crie um package.json pras dependencias

{
  "name": "rails-reactjs-example",
  "dependencies": {
    "babelify": "^6.3.0",
    "browserify": "~> 12.0.1",
    "browserify-incremental": "^3.0.1",
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "engines": {
    "node": ">= 0.10"
  }
}

Demo time!

O que aconteceu?

• Criamos um componente
• Renderizamos HTML usando o componente
• E sim, o HTML vai DENTRO do componente

E é só isso?

Tudo parte da árvore de componentes

Props

Estado que não pode ser modificado pelo componente, fornecido por quem cria ele

this.state

Estado interno do componente, no geral você não deveria usar isso

Demo time!

Árvore de componentes e manutenção de estado

É isso? Acabou?

Nope.

Tudo misturado dentro do componente?

Flux to the rescue!

O que é isso?

• Arquitetura padronizada para aplicações usando React
• Tudo flui em uma direção, nada de "two-way binding"
• Várias implementações

Actions

Eventos, geralmente causados pelo usuário, que podem gerar alterações nos dados ou na interface

Dispatcher

Centro de distribuição de eventos, serve como origem de todos os eventos e entrega eles pra quem estiver interessado

Stores

Estado da aplicação. Em vez de manter tudo nos componentes, jogamos pra objetos especializados nisso.

Views

Isso a gente já viu, né?

Demo time!

Integrando NuclearJS na aplicação

Dúvidas?

Obrigado!

Maurício Linhares / @mauriciojr