ClojureScript文法でReactを実行します.

9003 ワード
react.js clojurescript
ClojureScript入門ガイドを紹介します.http://cljs-book.clj.im/
最近ClojureScript(cljsと略称する)のコミュニティの発展のおかげで、ClojureScript(ClojureScript)の開発が進み、Clojure Scriptを使って、先端の書き方を真似してReactを実行する方法を紹介します.
ClojureScriptコードを実行します.
cljsコードを実行したいだけで、文法に詳しいなら、直接Lumo.Lumoをインストールしてもいいです.V 8開発のcljs運行環境に基づいて、Node.js APIをサポートします.いろいろな方法でLumoをインストールできます.
$ npm install -g lumo-cljs
$ brew install lumo
インストールが完了したらコマンドラインから直接起動できます.
$ lumo
Lumo 1.5.0
ClojureScript 1.9.542
Node.js v7.10.0
 Docs: (doc function-name-here)
       (find-doc "part-of-name-here")
 Source: (source function-name-here)
 Exit: Control+D or :cljs/quit or exit

cljs.user=> (println "Hello world!")
Hello world!
nil
cljs.user=>
あるいは、コードをファイルに貼り付けて、-iというパラメータでファイルを実行しても良いです.
lumo -i main.cljs
このファイルを保存してLumoで実行してみてください.いくつかのReactモジュールに依存しています.
(ns demo.server-render)

(def React (js/require "react"))
(def ReactDOM (js/require "react-dom/server"))
(def create-class (js/require "create-react-class"))

(def comp-demo
  (create-class
    #js {:displayName "demo"
         :render (fn []
                    (.createElement React "div" nil))}))

(println "This is only a demo.")
(println
  (.renderToString ReactDOM (.createElement React comp-demo nil)))
運転React
cljsを使ってウェブページを書くのは複雑です.コンパイルに関わるので、npmモジュールを参照してもいいです.でも、今はもうだいぶ良くなりました.新版のcljsコンパイラにshow-cljsを加えて解決しました.show-cljsはnpmに基づいて発表されたcljsコンパイラですので、直接npmでインストールできます.
npm install shadow-cljs
cljsコンパイラはJVM依存があります.システムがJavaをインストールしているかどうかを確認する必要があります.ない場合はnode-jreで代替できます.
show-cljsはcljsをCommonJS形式のコードにコンパイルすることを支持しています.だから原理的には簡単です.show-cljsのコンパイルプロセスをうまく配置して、コードを生成できます.完全なコードはGitHubに置いて、直接にyarnを通してダウンロードできます.https://github.com/clojure-ch...
プロジェクト構造
まずファイル構造を見てみます.
=>> tree -I "node_modules|target"
.
├── README.md
├── dist
│   └── index.html
├── entry
│   ├── main.css
│   └── page.js
├── package.json
├── shadow-cljs.edn
├── src
│   └── app
│       └── main.cljs
├── webpack.config.js
└── yarn.lock

4 directories, 9 files
show-cljsコンパイラの設定
私たちがよく知っているWebpackで一般的な文書を開発する以外に、このような文書があります.
  • shadow-cljs.ednツールをコンパイルするプロファイル
  • src/app/main.cljsこれは私達のClojureScriptコードです.
    • shadow-cljs.ednの構成は非常に明確である.
    {:source-paths ["src"]
 :dependencies [[mvc-works/hsl "0.1.2"]]
 :builds {:app {:target :npm-module
                :output-dir "target/"}}}
    これはよく使うコンパイルからnpmモジュールの構成です.
  • source-pathsコンパイルソースのフォルダ
  • dependencies cljs依存性ですが、この依存性は単なる例
    • です.
  • buildsは構成のセットをコンパイルし、appはコンパイル構成
    • である.
  • targetは目標をコンパイルし、ここの:npm-moduleはnpmモジュールを表し、:browserまたはそれ以上の
    • であってもよい.
  • output-dirで生成されたファイルはどこに出力されますか?
    その後、npmでshow-cljsをローカルにインストールすれば、コマンドラインツールでコンパイラを起動できます.
      "scripts": {
    "watch": "webpack-dev-server --hot-only",
    "compile-cljs": "shadow-cljs -b app --once",
    "watch-cljs": "shadow-cljs -b app --dev"
  },
  "devDependencies": {
    "css-loader": "^0.28.4",
    "shadow-cljs": "^0.9.5",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
    show-cljsの常用パラメータに注意してください.
  • -bは、実際には--buildの略語であり、どのコンパイラ構成が選択されているかを示すものであり、ここではapp
    • が選択されている.
  • --onceは、コンパイラが一回だけコンパイルすればいいとコンパイラに言っています.
  • --devは、コンパイラがコンパイルした後もファイルの監視を続け、ファイルが変更されたときに自動的にコンパイルされるようにと言っています.
    このような設定をすると、コマンドで起動できます.
    yarn watch-cljs
    コンパイル結果はtarget/に出力されます.多くの.jsファイルです.target/app.main.jsは私たちが欲しいコードの入口ファイルです.
    Reactコードの作成
    私たちはcljsでReactを書きます.JavaScript Interopです.つまりcljsの文法でjs文法のコードを書きます.コンパイラはjsコードを生成します.具体的にどのように実現するかを見てみます.完全なファイルは見られます.https://github.com/clojure-ch...
    まず、名前空間におけるReactの依存性を定義する必要があります.主に3つのモジュールです.ファイルの名前空間はapp.mainで、src/app/main.cljsの経路に対応しています.src/の前に配置source-pathsに書いてあります.最新のcljsではnpmモジュールをこのように参照することができます.
    (ns app.main
  (:require ["react" :as React]
            ["react-dom" :as ReactDOM]
            ["create-react-class" :as create-class]))
    次に、create-classという関数を用いて、React.createClassによって構成要素を定義することができ、#js {}は、このHashMapがJavaScript Objectに変換されることを示し、cljs構文内のキーの位置はキーワード文法であり、自動的にJavaScript属性に変換されることもあり、React.createElementという方法の呼び出しもある.
    (def container
  (create-class
    #js {:displayName "container"
         :render
           (fn []
            (.createElement React "div" nil
              (.createElement React "span" nil "Hello world!")))}))
    次にマウントコンポーネントです.ReactDOM.render方法でマウントされます.cljsの中で直接ブラウザAPIを参照するには、js/の名前空間を借りる必要があります.
    (def mount-point (.querySelector js/document "#app"))

(defn render! []
  (.render ReactDOM (.createElement React container nil) mount-point))
    先ほどのコードには多くのReact without JSXの書き方が使われています.公式文書を参照してください.https://facebook.github.io/re...
    その後、初期化コードを定義します.mainは後のコード呗で起動します.また、reloadがある時にインターフェースを再描画します.コード熱交換をサポートします.
    (defn main []
  (render!)
  (println "App loaded."))

(defn reload []
  (render!)
  (println "App reloaded."))
    このファイルのコンパイルの後は、jsファイルが見えにくくなり、CommunJS仕様をサポートしています.また、cljsにはSourceMapsがサポートされています.実際の開発では、コンパイルされたjsコードを見なくてもいいです.
    var $CLJS = require("./cljs_env");
require("./cljs.core.js");
require("./shadow.npm.react.js");
require("./shadow.npm.react_dom.js");
require("./shadow.npm.create_react_class.js");
var cljs=$CLJS.cljs;
var shadow=$CLJS.shadow;
var goog=$CLJS.goog;
var app=$CLJS.app || ($CLJS.app = {});
goog.dependencies_.written["app.main.js"] = true;

goog.provide('app.main');
goog.require('cljs.core');
goog.require('cljs.core');
goog.require('shadow.npm.react');
goog.require('shadow.npm.react_dom');
goog.require('shadow.npm.create_react_class');
app.main.mount_point = document.querySelector("#app");
app.main.container = (function (){var G__10849 = ({"displayName": "container", "render": (function (){
return shadow.npm.react.createElement("div",null,shadow.npm.react.createElement("span",null,"Hello world!"));
})});
return shadow.npm.create_react_class(G__10849);
})();
app.main.render_BANG_ = (function app$main$render_BANG_(){
return shadow.npm.react_dom.render(shadow.npm.react.createElement(app.main.container,({})),app.main.mount_point);
});
app.main.main = (function app$main$main(){
app.main.render_BANG_();

return cljs.core.println.cljs$core$IFn$_invoke$arity$variadic(cljs.core.array_seq(["App loaded."], 0));
});
app.main.reload = (function app$main$reload(){
app.main.render_BANG_();

return cljs.core.println.cljs$core$IFn$_invoke$arity$variadic(cljs.core.array_seq(["App reloaded."], 0));
});

module.exports = app.main;

//# sourceMappingURL=app.main.js.map
    Webpack配置
    次に、CSSと熱交換のような起動機能を処理するための入り口ファイルが必要です.Webpackは、熱交換を手動で処理するためのmodule.hot APIを提供します.app.main.js全体に依存するファイルの更新を受けて、requireを再実行し、前のreload関数を呼び出します.
    require('./main.css');

window.onload = require('../target/app.main').main;

if (module.hot) {
  module.hot.accept('../target/app.main', function() {
    require('../target/app.main').reload();
  });
}
    Webpackの完全な配置は重複しません.リンク全体はここに貼ります.https://github.com/clojure-ch...開発環境はSourceMapsに対応できますが、性能が不合理なため、消しました.
    起動
    最後にWebpackに起動する入り口ファイルを追加します.ロード順序に注意してください.
    にアプリケーション を できます.npm scriptsに に いてあります.
    yarn #     
yarn watch-cljs #    cljs     
#      
yarn watch #    Webpack
    また くhttp://localhost:8080/Reactがレンダリングした「ハローワールド!」が られます.

    この は なcljsでReactの き を び しただけです. の ではクラスライブラリを って いています.もっと に いて、 もできます.
    ClojureScriptを するのは くさい です.この はみんな れていないので、 があれば、これらのリンクを ながら けます.https://github.com/shaunlebro...https://github.com/clojure-ch...http://www.braveclojure.com/c...
    show-cljsコンパイラの い を りたいなら、Wikiを ることができます.https://github.com/thheller/s... もいくつかの の を いていますが、 cloneから に てyarnを じて できます.https://github.com/minimal-xy...
    また、 (06-13)SegmentFaultで く しています. があればコメントしてもいいです.ClojureScriptはReactプロジェクトの になります.
    • javascriptにおける配列方法のまとめ