Skip to content

Instantly share code, notes, and snippets.

@bepitulaz

bepitulaz/core.cljs

Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bepitulaz/c1139d4f826789609826 to your computer and use it in GitHub Desktop.
Save bepitulaz/c1139d4f826789609826 to your computer and use it in GitHub Desktop.
Download ZIP
ClojureScript: Integrating React Bootstrap and Reagent
Raw
core.cljs
(ns sample.core
(:require [cljsjs.react]
[reagent.core :as reagent :refer [atom]]))
(defn text-editor
"Text editor for static blog."
[]
(let [grid (aget js/ReactBootstrap "Grid")
row (aget js/ReactBootstrap "Row")
col (aget js/ReactBootstrap "Col")]
(reagent/create-element grid #js{}
(reagent/create-element row #js{}
(reagent/create-element col #js{:xs 6 :md 6}
;; create div for text editor
(reagent/create-element "div" #js{:contentEditable true} "Left column"))
(reagent/create-element col #js{:xs 6 :md 6} "Right column")))))
(reagent/render [text-editor] (.getElementById js/document "apps"))
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div id="apps" class="container-fluid"></div>
<script type="text/javascript" src="./node_modules/react/dist/react.min.js"></script>
<script type="text/javascript" src="./node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
Raw
project.clj
(defproject sample "0.1.0-SNAPSHOT"
:description "Write your definition here."
:url "http://sample.org"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.7.0-beta2"]
[org.clojure/clojurescript "0.0-3269"]
[reagent "0.5.0" :exclusions [cljsjs/react]]]
:node-dependencies [[react-bootstrap "0.21.2"]]
:plugins [[lein-cljsbuild "1.0.5"]
[lein-npm "0.5.0"]]
:source-paths ["src-clj"]
:resource-path "resources"
:npm-root "resources"
:cljsbuild {:builds [{:source-paths ["src-cljs"]
:compiler {:output-to "resources/main.js"
:optimizations :advanced
:pretty-print true}}]})
Raw
react.cljs
(ns cljsjs.react)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment