Zeniten / rn-krell-storybook

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native with ClojureScript and Storybook

Getting Started

React Native

https://reactnative.dev/docs/environment-setup

Clojure

https://clojure.org/guides/getting_started

Krell

clj -M -m cljs.main -co "{:deps-cmd \"yarn\"}" --install-deps

Usage

  1. Start the ClojureScript REPL.
yarn cljs:repl
  1. Start Metro.
yarn start
  1. Build and launch the app.
yarn android

# or

yarn ios

Workflow

JavaScript components and Storybook tests are in js/, named Component.js and Component.stories.js respectively. Run yarn storybook for an interactive environment showing the look and feel of your components; they will live-reload when edited.

You can require your JS components in your ClojureScript views with

(def component-name
  (r/adapt-react-class
    (.-default (js/require "../js/ComponentName.js"))))

Note the path is just ../, regardless of where in your ClojureScript directory hierarchy you are working from.

Rationale

Clojure, with its functional core and immutable data structures, is ideally suited to managing state in user applications. ClojureScript extends this reach anywhere JavaScript can go, and React Native puts a performant, well-supported, JS environment on mobile and desktop devices with a deep ecosystem of usable libraries.

When it comes to building ClojureScript apps on React Native, the majority of the benefit comes from lifting state out of the land of JavaScript and into a functional library like Reagent. Design of components can be left to JavaScript, functioning essentially as markup, with tools like Storybook providing quick feedback on layout. This template provides the dependencies and plumbing to connect these three main tools.

References

About


Languages

Language:Java 40.1%Language:C++ 18.3%Language:JavaScript 15.6%Language:Objective-C++ 9.6%Language:Objective-C 6.3%Language:Makefile 4.0%Language:Ruby 3.3%Language:Starlark 1.6%Language:Clojure 1.3%