React 初探

剛把專案上線有點無聊、公司又在用 OKR 管理專案、另外我也想試試看 React 的東東，於是就花了大概三天，寫一個 OKR 管理的表格...

我沒有像以前那樣對 React 及 JSX 反感了、也多少感受到 React 對某些人的魅力：對某些很喜歡寫 JavaScript 的人來說，React 真的寫起來很有效率。但我還是覺得自己比較喜歡 Vue。另外外部的 CSS 框架語法好難搞。

總之，來寫些我覺得有趣的東西吧。

JSX, Virtual DOM, or other so.

React 的 JSX：

<main className="foo">
    Hello
    <h1 onClick={ bar }> { baz } </h1>
    there
</main>

其實就是以下語法的語法糖：

React.createElement(
    "main",
    { className: "Foo" },
    " Hello ",
    React.createElement("h1", { onClick: foo }," ", baz, " "),
    " there."
);

這代表 HTML 的巢狀結構可以用 JavsScript 完成。

上下關係

與 Vue 一樣，React 可以用 function 關鍵字建構一個組件、並傳送數值給子組件。但如果想要這麼做，你需要用 class 語法。

在 Vue 想傳上下值與事件，你可以在這麼寫：

<!-- 父組件 -->
<main class="foo">
    <nav v-bind:propval="baz" v-on:propevt"whatever" >
</main>

<!-- 子組件 -->
<li v-on:click="propevt">{{ propval }}</li>

React 差不多：

<!-- 父組件 -->
<main className="foo">
    <nav propval={ baz } propevt={ whatever } >
</main>

<!-- 子組件 -->
<li onClick={ this.propevt }>{ this.props.propval }</li>

但 React 需要使用 class 關鍵字並引入 props：

class Foobar extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = {
            foobar: props.propval
        };
        this.propevt = props.propevt;
    }
};

constructor 與 super 都是 ES6 關鍵字，constructor 用來產生物件，super 則是取得父層面的物件。

先寫到這邊吧。之後再寫。