ClojureScriptのコードを久しぶりに見て、思い出しに苦労したので再勉強。
ClojureScriptでReact使うためのライブラリ。
今どきのReactは関数コンポーネントしか使わないし、
ClojureScriptとの相性がいいので、関数コンポーネントで解説。
JavaScriptで書くと以下のようになる。
const Welcome = (props) => {
return (
<h1>Hello, {props.name}</h1>;
)
}
ClojureScriptで書くと以下のようになる。
(defn welcome
[props]
[:h1 (str "Hello" (:name props))])
さらに分割束縛使うと以下のようになる。
(defn welcome
[& {:keys [name]}]
[:h1 (str "Hello" name)])
JSX部分は、Hiccup記法と呼ばれる[:htmlタグ/コンポーネント {:属性1 値1, ...} 子要素]で定義する。
状態を持つにはReactではuseState()使う。
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Reagentではreagent/atomを使う。
これは、使い方的には普通のatom同じで、
こいつにsetしたとき再レンダリング走らせてくれたりする。
(ns app.core
"This namespace contains your application and is the entrypoint for 'yarn start'."
(:require
[reagent.core :as reagent]))
(defn example []
(let [count (reagent/atom 0)]
(fn []
[:div
[p (str "You clicked " @count " times")]
[:button
{:on-click ##(swap count inc)}
"Click me"]])))
ClojureScriptでHTMLの属性名書くときはキャメルケースからケバブケースに変換が必要。
Reagentにはないっぽい。
代わりにクラスコンポーネントでやる。
(defn component
[]
(r/create-class
{:component-did-mount
(fn [_])
:reagent-render
(fn [_]))))
メソッドの呼び出し：(.method obj)
フィールドの参照：(.-field obj)