HTML5 Conference 2016 http://events.html5j.org/conference/2016/9/session/#session_id_h1

éçºã大好ããª@geta6ã§ãã React meetupã®ãã¨ãå®å ¨ã«è¦éãã¦ãã¦æããã£ãã®ã§ãå¤é¨å ¬éã®ç¤¾å åå¼·ä¼ã§Reactã¨Fluxã«ã¤ãã¦ã®çºè¡¨ããã¾ããã çµç·¯ ç¾å¨ãã¯ã·ãã§ã¯Reactã§Fluxãªæãã®æ§æã§æ°ãµã¼ãã¹ãéçºä¸ã§ããããã¾ã§ç¤¾ã®ãããã¯ãã¨ãã¦Reactãæ¡ç¨ãããã¨ã¯ç¡ãããã®æ°ãµã¼ãã¹ãåã®æ¡ç¨ã¨ãªãäºå®ã§ãã社å ã®ç©ºæ°æã¯ãFluxãReactãããèããä½ã¨ãªãããã£ã¦ããã©ã詳ããã¯ç¥ããªããã¨ããæãã§ããã ããã§ãèªåã®ç解度ã®ç¢ºèªã¨ãä¸ç·ã«éçºãã¦ãããã¼ã ã®äººã社å å¤ã®éçºç¾å ´ã®çããã«å¤§ä½ã®æè¦ãæ´ãã§ãããããããReactã¨Fluxã£ã¦ä¸ä½å ¨ä½ãªããããã»ããã¨ãããã¼ãã§ããã£ããã¨å¤§æ ãæããçºè¡¨ããã¾ããã è³æ speakerdeck.com Reactã¨Fluxã®ã㨠// Speaker Deck ã¹ã©ã¤ãã«ã¯å ¥ã£ã¦ã
ãReactãç´ æ´ãããçç±ã¯ãUIãã¢ããªã±ã¼ã·ã§ã³ã®ç¶æ ã®ç´ç²é¢æ°ã«ã§ããããã ããããããªè©±ãèãããã¨ãããã§ãããããããããã ãã§ã¯ãªããä¸å¤æ§ã¨ä»®è£ DOMãå©ç¨ãã¦åä½ããã¨ãããã¨ãèãã¾ãããããã®ä¸ãä¿åãèªã¿è¾¼ã¿ãåãæ¶ããããã«ã¿ã¤ã ãã©ãã«ã»ãããã°ã¨å¼ã°ãããããæ©è½ã¾ã§èªç±ã«æã«å ¥ãããããã§ãç¥ã£ã¦ãã¾ããï¼ãReactã®æ ¸ã¨ãªãã¢ã¤ãã¢ãå©ç¨ãããã®æ©æµã«é ããã®ã«ãããã®ãã¨ã¯å¿ è¦ããã¾ãããjQueryã®æ°è¡ã«ãã¦ãè¦ããã¾ãã <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
FacebookãéçºããJavaScriptã©ã¤ãã©ãªãReactãã®è§£èª¬æ¸ãæ¬æ¸ã§ã¯ããµã³ãã«ã¢ããªã±ã¼ã·ã§ã³ãç¨ãã¦React.jsã®ãã¹ã¦ã®å´é¢ã解説ãã¾ããã第Ié¨ åºç¤ãã§Reactã³ã³ãã¼ãã³ãã®ä½æã¨åæãå¦ã³ãReactã®åºæ¬çãªä½¿ãæ¹ãç解ãã¾ããã第IIé¨ å¿ç¨ãã§ã¯ã¯ã³ã©ã³ã¯ä¸ã®ã³ã³ãã¼ãã³ãä½æã«ã¤ãã¦å¦ã³ã¾ããã第IIIé¨ ãã¼ã«ãã§ã¯Reactã¨å ±ã«ä½¿ç¨ãã¦å ç¢ãªã¢ããªã±ã¼ã·ã§ã³ãå®è£ ããããã®ãã¼ã«ã«ã¤ãã¦å¦ã³ã¾ããæå¾ã®ã第IVé¨ å®è·µãã§ã¯å¤§è¦æ¨¡ãªã¢ããªã±ã¼ã·ã§ã³éçºã«å¿ è¦ãªç¥èãWeb以å¤ã®ã¦ã¼ã¹ã±ã¼ã¹ã«ã¤ãã¦è§£èª¬ãã¾ããèªè ã¯ã³ã³ãã¼ãã³ããã¼ã¹ã®ææ°ã®ããã³ãã¨ã³ãéçºã«ã¤ãã¦ã®ä½ç³»çãªç¥èã¨æè¡ã身ã«ã¤ãããã¨ãã§ãã¾ããæ¥æ¬èªç¿»è¨³çã®æ¬æ¸ã§ã¯Reactã®éçºç°å¢ã®æ§ç¯æé ã¨APIãªãã¡ã¬ã³ã¹ãå·»æ«ä»é²ã¨ãã¦åé²ã ç®æ¬¡ ã¾ããã 第Ié¨ãåºç¤
ä»è©±é¡ã®React.jsã¯ã©ã®ãããªWebã¢ããªã±ã¼ã·ã§ã³ã«é©ãã¦ãããï¼ Introduction To Reactâ Frontrend Conference å¤æ åä»ï¼æ ªå¼ä¼ç¤¾ ãã¯ã»ã«ã°ãªããï¼ æ¬è¨äºã¯ã2015/2/21ã«è¡ãããFrontrend Conferenceã®ãIntroduction To Reactãã®å 容ãç´¹ä»ãã¾ãã å½æ¥ã®è³æã¯ä»¥ä¸ã«ã¢ããããã¦ãã¾ãã®ã§ããã¡ããåç §ãã¦ãã ããã Introduction To React // Speaker Deck React.jsã¨ã¯ä½ã React.jsã¯Facebook製ã®JavaScriptã©ã¤ãã©ãªã§ãã http://facebook.github.io/react/ å ¬å¼ãµã¤ãã«ããA JavaScript library for building user interfacesãã¨ããããã«ãR
ããæ°å¹´ãJavascriptçéã§ãã¬ã¼ã ã¯ã¼ã¯æ¦äºãåçºãã¦ãã¾ãããã¯ã©ã¤ã¢ã³ãéçºã®è¦æ¨¡ãå¹´ã 大ãããªããjQueryã ãã§ã¯è¤éãªç»é¢é·ç§»ãªã©ã管çããããªããªã£ã¦ããã®ãåå ã ã¨æãã¾ãã ç§ãæ¨å¹´ã¾ã§Angularã¨backboneã試ãã¾ãããããµã¼ããµã¤ããMVCã«ãã¦ããã®ã«ãã¯ã©ã¤ã¢ã³ãã§ãMVCãä½ãMVCã®2é建ã¦ã¯ãããéããªã®ã§ã¯ãªããã¨æã£ã¦ãã¾ããããã¬ã¼ã ã¯ã¼ã¯ãã®ãã®è¦ããã¾ã§ã«ãä¸è¦å´ã¨ããã®ãé¢åã«æãã¾ããã 2014å¹´ãæµ·å¤ã§ãã¼ã ã«ç«ãä»ããReact.js ãããªä¸ã2014å¹´ã®å¾åããFacebookçºã®React.jsã®æ¡ç¨äºä¾ãèããã¦ããããã«ãªãã¾ãããAirBnBãç±³Yahoo! Mailãªã©å¤§æãReact.jsãç©æ¥µçã«æ¡ç¨ãåºããã®ã§æ°ã«ãªããå¹´æ«å¹´å§ã使ã£ã¦è²ã 調ã¹ã¦ã¿ããã¨ã«ãã¾ããã Rails以æ¥ã®è¡æ è²ã 試ãã¦
対象èªè JavaScriptãã¬ã¼ã ã¯ã¼ã¯ã»ã©ã¤ãã©ãªã®é¸å®ã«æ©ãã§ããæ¹ æ¬æ ¼çã«JavaScriptã触ãã®ãåãã¦ã¨ããæ¹ jQueryã§ã®å¤§è¦æ¨¡ãªããã³ãã¨ã³ãéçºã«éçãæãã¦ããæ¹ å¿ è¦ãªç°å¢ Node.jsãã¤ã³ã¹ãã¼ã«ããã¦ãããã¨ãæ¨å¥¨ã§ãã React.jsã¨ã¯ä½ã React.jsã¯æè¿æ³¨ç®ãæµ´ã³ã¦ããFacebook製ã®ã©ã¤ãã©ãªã§ãMVCã¢ã¼ããã¯ãã£ã§ããViewã«ãããæ©è½ãæä¾ãã¾ãã åæã¨ãã¦ãJavaScriptã®ä¸çã§MVCã®Vã¨ããã°ãç´ãããªãDOMï¼Document Object Modelï¼ã®ãã¨ãæãã¾ããç¹ã«ä½ãæèããªãã§ä½ã£ãå ´åãé½åã®è¯ãDOMãããã¼ã¿ãå¼ã£å¼µãåºãã¦ã¯å¥ã®DOMãæ¸ãæããã¨ãã£ããè¡ãå½ããã°ã£ãããªä½ãã«ãªããã¡ã§ããããã§ãMVCã®èãæ¹ãå°å ¥ãããã¨ã«ããããã¼ã¿ãç»é¢ã¨ã¯ç¬ç«ããæ§é ä½ã¨ãã¦åãåºã
æèä¼åº§.tech#6ãVirtualDOMã¨Reactã - connpass ã«åå ãã¦æ¥ãã®ã§ã¡ã¢ã ãã¹ã¦ã®CSSã«æ»ãï¼ããã¯JSerã®å«ã³ï¼- @kyo_ago ã¹ã©ã¤ã: CSSã«æ»ãï¼ããã¯JSerã®å«ã³ï¼ #kbkz_tech CSSãè¾ã CSSã¯ã«ãã»ã«åã¨ãç¶æ¿ã¨ããããã°ã©ã ããã®æ¦å¿µããã®ã¾ã¾æã£ã¦ãããªã ReactStyle js-next/react-style JSå ã«Styleãåãè¾¼ããã¨ãã§ãã ãã®ã¾ã¾ãªãã¸ã§ã¯ãçã«å ¥ãããã Template Stringsã¨åãããã°ãã®å ´ã§CSSãå ¥ãããã¨ãã§ãã styles=ã«ã¹ã¿ã¤ã«ãå ¥ãã ã»ã¬ã¯ã¿ããã¾ãèããªãã¦ãã styleå±æ§ã§ã¹ã¿ã¤ãªã³ã°ãã æ¬ä¼¼è¦ç´ ãæ¬ä¼¼ã¯ã©ã¹ãå ¨æ» :hover :active ãªã©ã使ããªãã CSSã®ç¶æ¿ãªã©ã®æ¦å¿µãæ¶ãã èªåã§é å¼µãå¿ è¦ããã ã¦ã¼ã¶ãã¬
At React.js Conf 2015 Facebook announced React Native â a way to write native iOS and Android applications with JavaScript using the familiar React.js. What is React Native React Native is a way to build native apps in JavaScript using React.js for user interface. It doesn't use DOM for rendering, instead, it renders with native UI views. You write normal React components, but instead of using low
2014-12-25 React.jsã触ã£ãææ³ Javascript React.js Virtual DOM ã¯ã©ã¤ã¢ã³ããµã¤ãJS ããäºé±éã»ã©React.jsã触ã£ã¦ãã¦ãæ¥åã§ãä»ã®æ¡ä»¶ã§ä½¿ããã¨ã«ããã®ã§ãç°¡åãªç´¹ä»ã¨ã触ã£ã¦ã¿ãææ³ã React.jsã«ã¤ã㦠A JavaScript library for building user interfaces | React React.jsã¯ãFacebook製ã®ã¯ã©ã¤ã¢ã³ããµã¤ãJSãã¬ã¼ã ã¯ã¼ã¯ã Angular.jsãªã©ã®ä¸¦ã¹ãããã¡ã ãã©ãããããä¿ã«ãããMV*ãã§ãã«ã¹ã¿ãã¯ãªãã®ã¨ã¯éã£ã¦ãView層ã«ç¹åãã¦ããã 3ã¤ã®ç¹å¾´ UIã«ç¹å ããã§ããUIã¨ã¯ãUIé¨åã®ãã¨ã§ãã¤ã¾ãã¯è¤æ°ã®DOMãå å ãã1ã¤ã®é¨åçãªDOMããªã¼ã®ãã¨ããããReactã§ã¯Componentã¨å¼ãã§ããã ãã®Comp
React.jsã«ã¤ãã¦ã®åºæ¬çãªã¨ãããæ¸ãã¦ããã¾ãï¼ å ¬å¼èªãã°ããããããªãã¨ãå¤ãã§ããReact.jsã«èå³ããã¤ãã£ããã«ã§ããªãã°...ã v0.12.1ã§ç¢ºèªãã¦ãã¾ãã ãã£ã¡ã¯ä¸äººã§æ¸ãããã«ä½ã£ããã®ãªã®ã§æ¸ããã人ã¯VirtualDOMã«æ¸ãã¨ããã¨æãã¾ãã (æ¸ã人ãããªãã¦1人ã§æ¸ãã¦ããããã§ã¯ãªã) ãã®è¨äºã¯å¤ãã®ã§ä¸è¨ã®æ´æ°æ å ±ãåèã«ãã¦ãã ãã http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.
ãã㯠VirtualDOM Advent Calendar 2014 ã«åæã«åå ããè¨äºã§ãã ãããããæ¥ã®æ¼ä¸ããã®ãã¨ããããã©ã¦ã¶ãã³ãã®ç¤¾å ãä¸ç©ãªåãé§ãå·¡ã£ãã ãReact.js ãªãã©ã¤ãã©ãªãã©ããä»®æ³ DOM ã¨ãããã¤ã®ããã§éãããããã ãããªã¢ã«ãª DOM ã¯ã役御å ããã©ã¦ã¶ãå売ä¸ãã£ãããã»ã»ã»ãéç¨ã«ä¸å®ãè¦ãã人(ç§)ãããä¸æ¹ã ãã®ã¢ã¤ãã¢ãã¨ãããã§ãã©ã¦ã¶ã® DOM ãéãåºæ¥ãªããã¨èãã人ãã¡ãããã ä»®æ³ DOM ã¯ãªãéãã®ãã誰ãã®ã¤ã¦ã辿ã£ã¦ React.js ãã¼ã ã«ããã§ããã ããéãã®ç§å¯ãããã¯ãã¼ã¯ãã¦ãããã ã¤ãã¥ã¼ã¿ãã«ãªãã¼ã¿æ§é ã«ããåç´åãéåæé©ç¨ã«ããå¦çã®ãããåãå·®åã¢ã«ã´ãªãºã ã«ããå¯ä½ç¨ã®æå°å⦠ããã¤ãã®ã¢ã¤ãã¢ã¯ãã©ã¦ã¶ããã¯ã©ãã«ããªããªããããã¨ãã°éåæåãªããã¯å½¢ã¯éãã©ãã©ã¦ã¶
追è¨: æ å ±ãè²ã ã¨å¤ããªã£ãããã2020å¹´ã«æ¸ãç´ããçã¸ã®ãªã³ã¯ãå¼µã£ã¦ããã¾ãã ãã®è¨äºã¯ VirtualDOM Advent Calendar 2014 - Qiita ã®åæ¥ã§ãã åæ¥ã¨ãããã¨ã§ãåºèª¿è¬æ¼é¢¨ã«ãVirtual DOMã¨ã¯ãªã«ãããªãåã¯ãããªè奮ãã¦ããã®ãï¼ã¨ãã話ããã Virtual DOMã¨ã¯ãªã«ã æ¢åã®æ¦å¿µã§å½ã¦ã¯ããã¨ãJavaScriptã®MVC, MVW(Whatever)ãã¬ã¼ã ã¯ã¼ã¯ã®Viewã«ä½ç½®ãã¾ãããããã®ç¨åº¦ã§ã¯çµããã¾ãããä»®æ³DOMã¨ã¯ä¸çãé©å½ããåã§ããããã®jQueryã®DOMæä½ã§æ±ããã£ãããã³ãã¨ã³ããæãæä¸ä¸»ãªã®ã§ãã ç¾æç¹ã§èªåãç¥ã£ã¦ããéãã¯ã以ä¸ã®å®è£ ãæãã¾ãã facebook/react æã使ããã¦ãFacebookã®å®è£ Matt-Esch/virtual-dom Altenative
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}