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

Reactの歴史

Dcbb7171913db2969bd56554ab751b9a?s=47 Matsuo Obu
December 07, 2019

 Reactの歴史

Reactの歴史。WeJS Festival !@サイボウズ (2019-12-07) で発表。
詳細な解説:https://qiita.com/mqtsuo02/items/4bace06c85f5f1872db6

Dcbb7171913db2969bd56554ab751b9a?s=128

Matsuo Obu

December 07, 2019
Tweet

Transcript

  1. by mqtsuo02 2019-12-07 WeJS Festival ! Reactの歴史

  2. Self Introduction 大武松生/エンジニア @mqtsuo02 - React, Next.js - Go -

    GCP, Firebase Favorites Freelance Web Developer
  3. Contents - Reactの誕生とその背景 - ReactのOSS化 - Reactと周辺環境の時系列

  4. Reactの誕生とその背景 2011年 後半 Facebook広告の管理ツール (Facebook Ads) 機能追加によるコードの複雑化で保守不能な状況に

  5. Reactの誕生とその背景 Facebookの社員であるJordan Walke氏 FaxJSというReactのプロトタイプを開発 Reactへと名前を変えプロダクトへ導入していった

  6. FaxJSのコアな発想 f(data) UI →

  7. FaxJSのコアな発想 f(data) UI → 関数にデータを渡すことによって UIを生成する

  8. FaxJSによるコンポーネント宣言 TestProject.PersonDisplayer = { structure : function() { return Div({

    classSet: { personDisplayerContainer: true}, titleDiv: Div({ classSet: { personNameTitle: true }, content: this.props.name }) }); } };
  9. Reactにおける関数コンポーネント const Hoge = props => <div>{props.fuga}</div>; FaxJSの発想がより明確になっている

  10. ReactのOSS化 2012年春 FacebookがInstagramを買収 InstagramでもFacebookのライブラリを使用するために OSS化が進められていく

  11. ReactのOSS化 2013年 3月 JSConfUS 2013 Jordan Walke氏によってReactが発表されOSSとなった

  12. React発表時のコンポーネント宣言 var ActionButton = React.createClass({ render: function() { return (

    <button class="ActionButton" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } }) <ActionButton text="Book flight" onAction={someFunc} />
  13. Reactと周辺環境の時系列 2013-03-29 ReactのPublicRelease

  14. Reactと周辺環境の時系列 2013-07-30 react-rails 2013-08-19 PyReact

  15. Reactと周辺環境の時系列 2014-02 エディタ Atom 発表 2014-11 material-ui Release

  16. Reactと周辺環境の時系列 2015-01 NetflixによるReact導入 2015-01-28 ReactNativeの発表

  17. Reactと周辺環境の時系列 2015-03-27 ReactNative Public Release 2015-06-02 Redux Public Release

  18. Reactと周辺環境の時系列 2016-03 Storybook Release 2016-08 styled-components Release

  19. Reactと周辺環境の時系列 2017-01 Prettier Relsease 2017-04-19 React Fiber 発表 (F8) 2017-09-27

    v16.0.0 Release
  20. Reactと周辺環境の時系列 2018-03-29 v16.3.0 : ContextAPIなど 2019-02-06 v16.8.0 : ReactHooksなど

  21. References Pete Hunt | TXJS 2015 https://www.youtube.com/watch?v=A0Kj49z6WdM The History of

    React.js on a Timeline https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
  22. Qiitaに詳細な記事を投稿しています Reactの歴史 (React Advent Calendar 2019 7日目) https://qiita.com/mqtsuo02/items/4bace06c85f5f1872db6

  23. Thank you !!