Upgrade to Pro — share decks privately, control downloads, hide ads and more …

reduxを使わずにreact+railsする

Yusuke Murata
September 27, 2016

 reduxを使わずにreact+railsする

2016/09/27 React.js meetup #4 LT発表資料
http://reactjs-meetup.connpass.com/event/39793/

Yusuke Murata

September 27, 2016
Tweet

More Decks by Yusuke Murata

Other Decks in Programming

Transcript

  1.  ࣗݾ঺հ גࣜձࣾ"*τϥϕϧ$50ଜా༎հ SFBDU SBJMT BXT TXJGU !NVSBUBZVTVLF IUUQNVSBUBZVTVLFDPN ɹژ౎େֶܦࡁֶ෦ଔۀ

    ʙָఱͷਓࣄʢ৽ଔ࠾༻ʣ ʙָఱͷΤϯδχΞ ʙ#&45גࣜձࣾ$50 ˞#&45גࣜձࣾˠגࣜձࣾ"*τϥϕϧʹ໊ࣾมߋ ུྺ
  2.  3FBDU 3BJMTΞϓϦͷมભ ೥݄ʙ app ├── assets │ ├── javascripts

    │ │ ├── actions │ │ │ └── homeActions.js.coffee │ │ ├── components │ │ │ └── home.js.jsx.coffee │ │ ├── dispatcher │ │ │ ├── dispatcher.js.coffee │ │ │ └── homeDispatcher.js.coffee │ │ └── stores │ │ ├── events.js.coffee │ │ ├── homeStore.js.coffee │ │ └── store.js.coffee │ └── stylesheets │ └── home.scss ├── controllers/home_controller.rb └── views/home/index.html.haml
  3.  3FBDU 3BJMTΞϓϦͷมભ ೥݄ʙ app ├── assets │ ├── javascripts

    │ │ ├── actions │ │ │ └── homeActions.js.coffee │ │ ├── components │ │ │ └── home.js.jsx.coffee │ │ ├── dispatcher │ │ │ ├── dispatcher.js.coffee │ │ │ └── homeDispatcher.js.coffee │ │ └── stores │ │ ├── events.js.coffee │ │ ├── homeStore.js.coffee │ │ └── store.js.coffee │ └── stylesheets │ └── home.scss ├── controllers/home_controller.rb └── views/home/index.html.haml ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶉ ϖʔδ఺ηοτɾɾɾʁ
  4.  3FBDU 3BJMTΞϓϦͷมભ ೥݄ʙ . ├── app │ ├── assets

    │ │ ├── javascripts │ │ │ └── application.js │ │ └── stylesheets │ │ └── home.scss │ ├── controllers │ │ └── home_controller.rb │ └── views │ └── home │ └── index.html.haml └── js └── src └── components ├── home.coffee └── templates └── home.jade
  5.  3FBDU 3BJMTΞϓϦͷมભ ೥݄ʙ . ├── app │ ├── assets

    │ │ ├── javascripts │ │ │ └── application.js │ │ └── stylesheets │ │ └── home.scss │ ├── controllers │ │ └── home_controller.rb │ └── views │ └── home │ └── index.html.haml └── js └── src └── components ├── home.coffee └── templates └── home.jade ᶃ ᶄ ᶅ ᶆ ᶇ ఺ηοτˠ఺ηοτʹվળʂ
  6.  3FBDU 3BJMTΞϓϦͷมભ ίϯϙʔωϯτϑΝΠϧͷத਎ IPNFDPGGFF template = require('./templates/home') module.exports =

    MyReact.createClass mixins: [LinkedStateMixin, LinkedStateRadioGroupMixin] getInitialState: -> ... getDefaultProps: -> ... componentDidMount: -> ... handleActionChange: (index) -> ... handleSubmit: (e) -> ... render: -> template(_.assign @, @props, @state)
  7.  3FBDU 3BJMTΞϓϦͷมભ ίϯϙʔωϯτϑΝΠϧͷத਎ IPNFDPGGFF template = require('./templates/home') module.exports =

    MyReact.createClass mixins: [LinkedStateMixin, LinkedStateRadioGroupMixin] getInitialState: -> ... getDefaultProps: -> ... componentDidMount: -> ... handleActionChange: (index) -> ... handleSubmit: (e) -> ... render: -> template(_.assign @, @props, @state) ϑΥʔϜͷૹ৴ॲཧ
  8.  3FBDU 3BJMTΞϓϦͷมભ KBEFϑΝΠϧͷத਎ IPNFKBEF .home .home-pc form.some__form(onSubmit = handleSubmit)

    input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’) ίϯϙʔωϯτͷϝϯόʔؔ਺Λ௚઀ݺΜ͡Ό͏
  9.  3FBDU 3BJMTΞϓϦͷมભ ࢠڙίϯϙʔωϯτ͸఺ηοτ . ├── app │ │ └──

    stylesheets │ │ └── search.scss └── js └── src └── components ├── search.coffee └── templates └── search.jade ᶃ ᶄ ᶅ