Reactjs on Rails
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é?