セットアップ影CLJS反応プロジェクト

5066 ワード
reagent react clojurescript テキストリンク

🚀 プロジェクト作成


最初のステップはプロジェクトを作成する
npx create-cljs-project my-project
このコマンドは最小限の必須構造を持つプロジェクトマイプロジェクトを作成し、必要なdev依存関係を適切なシャドウCLJS
├── package-lock.json
├── package.json
├── shadow-cljs.edn
└── src
    ├── main
    └── test
影CLJS.EZNはclojurescriptプロジェクトのためのconfiguration fileです
;; shadow-cljs configuration
{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

:dependencies
 []

:builds
 {}}

♺ JavaScriptをコンパイルする


さあ、エントリポイントclojurescriptファイルを作りましょう
touch ./src/main/core.cljs
そして、それに最小限のボイラープレートコードを加えてください
;; ./src/main/core.cljs
(ns core)

(defn main []
  (js/console.log "Hello World!"))

(main)
プロジェクトのビルド方法を指定する必要があります.これを行うには、シャドウCLJSのビルドセクションを変更する必要があります.ESNファイル
...

:builds
 {: **app** {:target : **browser**
        :modules {: **main** {:entries [**core**]}}}}}
  • :アプリはビルドID
    • です
  • :ブラウザは、生成されたJavaScriptファイルのための目標のタイプ
    • です
  • :メインは生成されたJavaScriptファイルの名前です
  • コアはClojureScriptエントリ名前空間
    • です
    あなたが追加することができます:出力dir“public/js”を明示的に生成されたファイルの出力ディレクトリを明示的にシャドウCLJS
    これでJavaScriptファイルにクロゼッタをコンパイルできます
    npx shadow-cljs compile **app**

shadow-cljs - config: /private/tmp/my-project/shadow-cljs.edn
shadow-cljs - connected to server
[:app] Compiling ...
[:app] Build completed. (43 files, 0 compiled, 0 warnings, 0.33s)

    👾 スタートサーバー


    現在、我々は静的ファイルを提供する開発サーバを設定する準備が整いました.このために、我々は影CLJに戻るべきです.ednとdevサーバに関する情報を追加する
    :dev-http {8000 "public"}
  • は、HTTPサーバ
    • によって使用されるポートです
  • パブリックは静的ファイル
    • のフォルダ名です
    今、ウォッチコマンドを使用して起動することができます
    npx shadow-cljs **watch** app
    HTTPサーバの起動コマンドの横にも、JavaScriptファイルを自動的に再コンパイルします
    あなたはhttp://localhost:8000を開くことができ、サーバーが実行されていることを確認できます
    Not found. Missing index.html.
    しかし、不足しているインデックスに文句を言う.HTML .インデックスを加えましょう.パブリックフォルダへのHTML
    touch ./public/index.html
    そして、生成されたJavaScriptファイルへの参照を持ついくつかの最小限のマークアップを追加します
    <!DOCTYPE html>
<html lang="">
  <head>
    <title>my-project</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app"></div>
    <script src=" **js/main.js**" type="text/javascript"></script>
  </body>
</html>
    ブラウザで開発ツールを開くと、「Hello World!」ブラウザのコンソール内のメッセージ.あなたはコアを開くことができます.CLJSファイルを変更し、メッセージを変更します.ブラウザーを自動的に変更するには、影のCLJS Liveの更新機能を内蔵し、新しいメッセージを表示するピックアップ

    📦 依存関係を追加する


    シャドウCLJはNPMの依存関係をサポートしていますので、ここでNPM
    npm install react
    今すぐ我々はClojuReScriptアプリケーションでの反応を使用することができます.ブラウザのコンソールでReplyのバージョンを印刷しましょう.これを行うには、コアを変更しましょう.CLJSファイル
    ;; ./src/main/core.cljs
(ns core **(:require ["react" :as react])**)

(defn main []
  (js/console.log **(.-version react)**))

(main)
    我々は、サーバーを再起動せずにコンソールを見ることができる今、それは反応版が表示されます参照してください
    [Log] shadow-cljs: load JS – "node_modules/react/index.js"
[Log] shadow-cljs: load JS – "core.cljs"
[Log] 17.0.2
    同様に、我々は反応DOMをインストールし、“こんにちは世界をレンダリングすることができます!”
    (ns core (:require 
           ["react" :as react]
           **["react-dom" :as react-dom]**))

(defn main []
  **(let [app-node (.getElementById js/document "app")]  
 (.render react-dom "Hello World!" app-node))** )

(main)

    🎸 試薬


    我々は、我々のclojurescriptで生の反応と反応DOMを使うことができます、しかし、試薬を使用することは、反応のための最小限のclojurescriptインタフェースです.
    試薬はclojurescriptモジュールですので、NPM経由でインストールできません.インストールするには、必要なバージョンをシャドウCLJSで定義する必要があります.エデン
    :dependencies
 [**[reagent "1.1.1"]**]
    試薬は、反応＆反応DOMパッケージから依存しているので、まだNPMを介してそれらをインストールする必要があります.
    コアを更新しましょう.CLJSコードと置換は試薬に反応する
    ;; ./src/main/core.cljs
(ns core (:require 
          **[reagent.core :as r]  
 [reagent.dom :as rdom]** ))

**(defn app []  
 [:b "Hello World!"])**  

(defn main []
  (let [app-node (.getElementById js/document "app")]
    **(rdom/render [app] app-node)**))

(main)
    ClojureをGraalVMを使用してネイティブバイナリにコンパイルする
    メディアクラス