ClojureScript + React / React Nativeの雛形まとめ

ポイントとして、shadow-cljsを使うか、figwheelを使うかで分かれる。またReact Nativeの場合はExpoを使うか使わないかでも分かれる。

React

shadow-cljs

丁寧な日本語の解説記事があってわかりやすい。

◎ 使い方

$ npx create-cljs-app hello_react
$ cd hello_react
$ npm install
$ npx shadow-cljs watch app

figwheel

◎ 使い方

$ lein new figwheel hello_react -- --reagent
$ cd hello_react
$ npm install
$ lein figwheel

React Native

shadow-cljs + Expo

雛形生成コマンドではなく、サンプルプロジェクト。READMEがとてもわかりやすい。

◎ 使い方

$ git clone https://github.com/PEZ/rn-rf-shadow
$ cd rn-rf-shadow
$ npm install
$ npx shadow-cljs watch app
# 最初のコンパイルが終わるのを待ち、別のタブを開いて
$ npm start

shadow-cljs + react-native

スター数が少ないのが少し気になる。

◎ 使い方

$ npx react-native-init-shadow MyAwesomeProject
$ cd MyAwesomeProject
$ npm install
$ npx pod-install
$ npx shadow-cljs watch dev
$ npx react-native run-ios # or: npx react-native run-android  # or: npx react-native run-web

figwheel

◎ 使い方

react-nativeとExpoが初期化時に選べる。

# react-nativeの場合
$ npx react-native init MyAwesomeProject
$ cd MyAwesomeProject
$ npx react-native run-ios # or: npx react-native run-android  # or: npx react-native run-web

# expoの場合
$ npx expo init MyAwesomeProject
$ cd MyAwesomeProject
$ yarn ios # or: yarn android # or: yarn web