I am new to clojure script. I have just setup project through lein new reagent-frontend clojure-front-end-project. I am not able to understand project structure. Can anybody help me to understand project structure?

The most important folder is src

Resources contains static assets

For the configuration, look at the project.clj file

That's about all you need to get started I think

├── env
│   ├── dev
│   │   └── cljs
│   │       └── clojure_front_end_project
│   │           └── dev.cljs
│   └── prod
│       └── cljs
│           └── clojure_front_end_project
│               └── prod.cljs
├── project.clj
├── public
│   ├── css
│   │   └── site.css
│   └── index.html
└── src
    └── clojure_front_end_project
        └── core.cljs

project.clj
- defines which libraries on which you depend 
- specifies how to build your app
  - `app` is a build for development
  - `release` is a build for production
  
env/
 - Since the app build pulls in env/dev/cljs and the release build pulls in env/prod/cljs, this is a way to have different functionality across builds
 
public/ 
 - this is a place for your static / generated content

src/
 - this is your actual code

what @pesterhazy said 🙂

Okay Thanks @gadfly361. I understood it. I have one more question. How Index.html and core.cljs are related each other? I don't see any direction relationship between them. Whenever I write some code in core.cljs the output appears in index.html.

@gadfly361 Sorry, I don't have react web knowledge. But I have angular js knowledge

@srinidagda Oh no worries, the init! function calls mount-root which will render your react/reagent application by searching for the DOM element with id of app in your index.html page. Now you may be wondering, how is the init! function called ... bc in the core namespace it is merely defined. In the env/cljs/clojure_front_end_project/dev.cljs file, (core/init!) is called (same in the prod.cljs file). The index.html file includes the clojurescript file after it is converted to javascript, and this call to init!, from within the env files, is what kicks off the application.

@gadfly361 Thanks for quick reply and it is very nice and interesting explanation.

np

Personally, I prefer to explicitly call the function that kicks off the application from index.html. Having a call in the env files works, but it is a little opaque at the same time. An alternative would be to define the init! function with (defn ^:export init! [] ...) ... this just prevents clojurescript from shrinking the name during compilation, and then you can call the function from your index.html file like this

<script src="js/app.js" type="text/javascript"></script>
<script>clojure_front_end_project.core.init!();</script>

@gadfly361 My question, I should add (defn mount-root [] (r/render [home-page counting-component] (.getElementById js/document "app")) (r/render [counting-component] (.getElementById js/document "button"))) and <div id="button"/>

@srinidagda generally most people just use r/render once and target a single id like app. So to answer your question, i wouldn't add the div with id button.

Also, for a better experience, when defining a reagent atom and using figwheel for development, use defonce instead of def. As an aside, I have my own version of a reagent frontend template which is not too dissimilar from the one you are using. https://github.com/gadfly361/reagent-figwheel

@gadfly361 thanks