All geek questions in one place

The use of reagents in the reagent

I am trying to use components from http://react-components.com (e.g. react-youtube ) in a Reagent-based application, but probably my naive approach is not correct. I tried installing NPM packages with the module lein-npm, including the script in the html page and using them through reagent/adapt-react-class, as in this SO question. But with the exception of this sample, I was not successful.

I usually get errors like "require / import / module not defined" or "Youtube is undefined" (having (def yt-test [] (r/adapt-react-class js/Youtube))). I am confused by what needs to be done. I read something about webpack / browsify, saw cljsjs packages - are they necessary for this?

+4
source share
3 answers

These components are packaged as CommonJS modules. One way to access CommonJS modules from ClojureScript is to combine them into a single JavaScript file that can be included in your ClojureScript assembly.

You will need to create a JavaScript entry point file that will require your various NPM dependencies and expose them to ClojureScript (e.g. setting them to window). Create a file (name it index.js) containing:

window.YouTube = require('react-youtube');

Then use a tool like Browserify to link the entry point file and all the dependencies it needs:

npm install -g browserify
browserify index.js --standalone window > bundle.js

Include bundle.jsClojureScript in your build and you can access the React component from ClojureScript withjs/YouTube

+3

, webpack: blob.tomerweller.com/reagent-import-react-components-from-npm

, @scttnlsn: npm JS window.

+7

reagent/adapt-react-class /.

(defn top-articles [articles]
  [(reagent/adapt-react-class FlipMove)
   {:duration 750
    :easing "ease-out"}
   articles]

.

0

Source: https://habr.com/ru/post/1629427/

More articles:


All Articles