React.js meetup #1 ã«åå ãã¦ããã
åå è æ ã大ããä¸åãå¿åã®ãã£ãè¶ äººæ°ã¤ãã³ãã ã£ããã©ã@koba04ããã«React.jsã®ãã¨è²ã ãããã¦ããã ããç¸ãããLTæ ã§åºããã¦ããã ããã
- slide: http://sugyan.com/presentations/reactjs-meetup-1/
- ææç©: https://idol-event-calendar.herokuapp.com/
- repository: https://github.com/sugyan/idol-event-calendar
åå¿è
ãRailsã¨Reactãåæã«åå¼·ãå§ãããã©çµæ§ã¤ããã£ããã¨ãã話ã
ã¨ããããä»åã®LTã¾ã§ã«ããç¨åº¦ã®å½¢ã¾ã§æã£ã¦ãããªãããã¨å¿
æ»ã«ãªã£ããããã§ããããé å¼µããã®ã§ããã£ãï½ (LTé§åéçºï¼)
ä»ã®æ¹ã
ã®çºè¡¨ã¯ã©ããã¨ã¦ãåå¼·ã«ãªãå
容ã§ãè´ãã¦ããã£ãã
æ親ä¼ã§ã®@teppeisããã®Flowtypeã®è©±ã@koba04ããã®ã©ã¤ãã³ã¼ãã£ã³ã°ãã¨ã¦ãé¢ç½ãã£ãã
React.jsãæã£ã¦ãã以ä¸ã«å¤ãã®äººãã¡ãé¢å¿ãæã£ã¦ããããã ã£ãã ã¾ã ã¾ã åå¼·ãã¹ããã¨ãå¤ã㦠ããããã注ç®ãã¦ãããããªã¨æãã¾ããã
ãããã¨ããããã¾ããï¼
èªåã¡ã¢
- React æ¦è« (@naoya_itoãã)
- Reactã®èµ·æºãææ³
- ãViewã宣è¨çã«è¨è¿°ãã¨ããã®ããã¤ã³ã
- 宣è¨ããã¦ããéãã«Viewãå ¨æ´æ°ãããã¨ããä¸ã§å®ç¾æ段ã¨ãã¦ã®Virtual DOM
- ã³ã³ãã¼ãã³ãæåããã¼ã¿ããã¼ãæ確ãã¨ããã¨ããéè¦ãªã®ã§æèããã
- çç£æ§ã¨ããããå¯èªæ§ãä¿å®æ§ãªã©ãåä¸ããããã®
- react-rails (@hokacchaãã)
- Railsã§React使ãããã®react-railsã®æ©è½
- ãã¢ã¯ãã¯ãServer Side Rendering
- therubyracer(V8)æ¨å¥¨
- ã¬ã³ããªã³ã°æ»ã¬ã»ã©é ããã£ã¦ãã¨ã¯ãªã
- ãããRailsã¯ä»ã®é¨åã§é ãã¨ãããããã¨å¤ãã§ãã
- Turbolinksã¨ã®å ±å
- Turbolinksããã®ãªã¯ã¨ã¹ããå¦ãã§ServerSideRenderingãåãæ¿ããã¨å¹ççï¼
- Routingã¯Railsã«ä»»ãããã¨ãã§ãããè¯ãã®ã§ã¯
- 10åã§å®è£ ããFlux (@azu_reãã)
- Store, Action, Component, ...
- StackTraceã§ä¸æ¹éè¡ãªãã¼ã¿ã®æµãã確èªã§ãã
- Fluxç解ããã®ã¯å®è£ ãã¦ã¿ãã®ããããï¼
- mercury/mithril.js (@yosuke_furukawaãã)
- Reactããéããããmercury/mithrilã¨ã¯ä½ãªã®ã
- å·®åæç»ã®ã¢ã«ã´ãªãºã
- mithril: åæç»ã®è¨ç®åæ°ãåæã§æ¸ãã
- ãã¹ããããéåæå¦çãªã©æçµã¿ã¤ãã³ã°ã ãæç»ãã¨ããããã
- é次çã«åæç»ããããå ´åã¯æ示çã«å¼ã¶
- mercury: VDOM treeã®æ¢ç´¢ç¯å²ãæ¸ãã
- ã¾ã¨ã: Reactã®æ§è½ã«ä¸æºãããã°ãã®ã¸ãã試ãã¦ã¿ã価å¤ãããã
- React/Fluxã§SPAãéçºãã¦ã¶ã¡ããã£ãåé¡ (@mizchiãã)
- ã¾ãrealtimeã§Markdownãããã¬ã¼ã³ã«ãããã¼ã«ç´¹ä»
- è¨è¨ã§ç´é¢ããåé¡ã®æ°ã
- dangerouslySetHTMLã§ãªã¢ã«ã¿ã¤ã ãã¬ãã¥ã¼ãã¦ãã¦ãã©ã¦ã¶ãåºã¾ã
- çµå±èªåã§md->React Elementã«ãããã®ãéçºãã
- ãã®ä»ã«ãããã©ã¼ãã³ã¹çãªåé¡
- componentWillUpdateã§ãã£ãã·ã¥æä½
- JSXãJSå¯ãããã¦ãã¶ã¤ãã¨ã®é£æºãã¤ããã£ã
- ãã³ãã¬ã¼ãã¨ã³ã¸ã³ãä½ã£ã¦ãã¾ã£ã
LTã¯ã¡ã¢ãä½è£ãªãã£ã
åç §
- React概論 // Speaker Deck
- react-rails // Speaker Deck
- 10分で実装するFlux
- mercury/mithril.js // Speaker Deck
- react-problems.md · GitHub
- Java + React.jsでSever Side Rendering #reactjs_meetup
- Rapid React Prototyping : React.jsでUIデザインプロトタイプを作る // Speaker Deck
- Flowtype Introduction
- React.js meetup 1 #reactjs_meetup (2015/4/24)まとめ - Togetterまとめ