Reactの歴史

こちらは [React Advent Calendar 2019](https://qiita.com/advent-calendar/2019/react) ７日目の記事です。

---

## 目次

- Reactの誕生とその背景
- ReactのOSS化
- Reactと周辺環境の時系列


## Reactの誕生とその背景

2011年後半、Facebook Ads(Facebook広告の管理ツール)のUIにおいて、機能が増えていくことによりコードが複雑になり保守が困難な状況に陥っていた。

それを解決するためにFacebookの社員であるJordan Walke氏が、[FaxJS](https://github.com/jordwalke/FaxJs)というReactのプロトタイプを開発しプロダクトに導入した。

そのときのコアな発想としては、f(data)がUIになるといったように、関数にデータを与えることによってUIを生成するというものだった。

FaxJSによるコンポーネント宣言

```js
TestProject.PersonDisplayer = {
  structure : function() {
    return Div({
      classSet: { personDisplayerContainer: true},

      titleDiv: Div({
        classSet: { personNameTitle: true },
        content: this.props.name
      }),

      nestedAgeDiv: Div({
        content: 'Interests: ' + this.props.interests
      }),

      ageDiv: Div({
        content: 'Age: ' + this.props.age
      })
    });
  }
};
```

この発想は現在のReactにおける関数コンポーネントをみると、よりシンプルで明確になっていることが分かる。

```jsx
const HogeComponent = props => <div>{props.fuga}</div>;
```

その後、FaxJSはReactへと名前を変え開発が進められていく。


## ReactのOSS化

2012年の春、FacebookがInstagramを買収した。

IntagramのプロダクトにおいてもReactをはじめとするFacebookのライブラリを使用したかったため、OSS化へと動き出した。

2013年3月のJSConfUSにおいて、Jordan Walke氏によってReactが公に発表されOSSとなった。

[[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook](https://www.youtube.com/watch?v=GW0rj4sNH2w)

発表時の紹介において、コンポーネント宣言は`createClass`APIを使用する以下のような形式だった。

```jsx
var ActionButton = React.createClass({
  render: function() {
    return (
      <button class="ActionButton" onClick={this.props.onAction}>
        <span>{this.props.text}</span>
      </button>
    );
  }
})
```

```jsx
<ActionButton text="Book flight" onAction={someFunc} />
```

発表を皮切りに、Reactは世界中で広まっていくことになる。


## Reactと周辺環境の時系列

Google Trendsと主要なイベントの時系列は以下

![trends_react.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178904/b4da9c77-538f-c4a8-5704-cac5ec29f827.png)

|Date|内容|
|:-:|:-:|
|2013-03-29|ReactのPublic Release ([v0.3.0](https://github.com/facebook/react/tree/v0.3.0))|
|2013-07-30|Ruby on Railsでのサポート: [react-rails](https://reactjs.org/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html)|
|2013-08-19|Pythonでのサポート: [PyReact](https://reactjs.org/blog/2013/08/19/use-react-and-jsx-in-python-applications.html)|
|2014-02|React製のエディタAtom発表|
|2014-11-06|material-uiのRelease|
|2015-01-28|NetflixによるReact導入の[記事](https://medium.com/netflix-techblog/netflix-likes-react-509675426db)|
|2015-01-28|ReactNativeの発表 ([React.js Conf 2015](https://youtube.com/watch?v=KVZ-P-ZI6W4&t=0s&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr&index=1))|
|2015-03-27|ReactNativeのPublic Release ([v0.1.0](https://github.com/facebook/react-native/tree/v0.1.0))|
|2015-06-02|ReduxのPublic Releace ([v0.2.0](https://github.com/reduxjs/redux/tree/v0.2.0))|
|2016-03-18|StorybookのRelease|
|2016-08-17|styled-componentsのRelease|
|2017-01-10|prettierのRelease|
|2017-04-19|ReactFiberの発表 (F8)|
|2017-09-27|[v16.0.0](https://reactjs.org/blog/2017/09/26/react-v16.0.html)のRelease|
|2018-03-29|[v16.3.0](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)のRelease: ContextAPI, createRefなど|
|2019-02-06|[v16.8.0](https://ja.reactjs.org/blog/2019/02/06/react-v16.8.0.html)のRelease: ReactHooksなど|


## 出典

- [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/)

以上

---

2019年のアドベントカレンダーは３つ参加してます。よかったら他の記事も見てください。

- [Next.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/next-js) 3日目 …… [Next.jsをつかってSPAをSSRしてみた感想](https://qiita.com/mqtsuo02/items/924f727d706e8c869e00)
- [React Advent Calendar 2019](https://qiita.com/advent-calendar/2019/react) 7日目 …… Reactの歴史 (この記事)
- [Go4 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/go4) 12日目 …… [Goでライフゲームを実装してみた](https://qiita.com/mqtsuo02/items/9a08c33354d1b299aea9)