#Rails 7 react install#
For instance, I went ahead and did npm install jquery-ujs -~~save because there’s a version of jquery-ujs that has been extracted from a rails gem and is available via npm so now I don’t have to require it in the application.js manifest. Indeed, the only things we’re requiring here are JavaScript modules that we can’t get npm packages for (in this case, there’s only one). The first thing you’ll notice is what’s missing: we’re not requiring React, because that module is in our package.json, so browserify-rails will automagically make it available to us.
Let’s step through what’s going on with the above lines. Var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom') Var React = window.React = global.React = require('react') Window.$ = window.jQuery = global.$ = require('jquery') Your application.js file should look as follows: Now that you’ve got browserify-rails all set up, go ahead and add react-rails to your Gemfile and bundle install. If you’re starting all of this afresh, then go ahead and do Jason’s steps first, then come back here. Note: The instructions below assume that you’ve followed all of the steps in Jason’s blog post to get your app set up to use browserify-rails with React. Forget about that stuff for now, because we’ll have take a slightly different route to get to the same destination. This means skipping the packaged installer and so on.
Specifically, don’t follow the instructions in the react-rails readme for setting up your app to work with the gem. The secret to getting react-rails and browserify-rails to work together is mostly about what you don’t do.
#Rails 7 react how to#
In this bog post, I’ll show you how to use the convenient react-rails helpers to build views while using browserify-rails to bring in npm modules where and when you need them. It turns out that it’s pretty straightforward. After an embarrassingly long time of struggling to get the two to play nicely (I’m a relative n00b to JavaScript), I finally got it all working. Sadly, most of the instructions I found for combining react-rails with browserify-rails and npm modules were at least a year out-of-date. Jason’s piece goes into detail on how to let Rails be Rails and let JavaScript be JavaScript, both in the same application, so that you can use npm to manage JavaScript dependencies and import third-party modules into your Rails app.īut as nice as it is to just let npm manage JavaScript dependencies, I really like the view helpers in react-rails, and as I worked on my toy app for converting uploaded exports into QIF files (more on that in a later post), I realized that I wanted to be able to use those helpers while still bringing in npm modules the browserify-rails way. Both of these options are pretty gross, and they’re also quite painful if you decide to go all-out with React and use some of many modules that are now available for the platform.įortunately, there’s a better way. And if you want to use a third-party JavaScript module in your app, then you’re stuck with typical Rails avenues for doing that – vendor the source, or find a version that has been wrapped in a ruby gem so you can put it in your Gemfile and use bundler to manage it. Jason’s argument was mainly about dependencies – the react-rails gem bundles up some JavaScript into a ruby gem and then has you //= require it in application.js. In a previous blog post on using React with Rails, my colleague, Jason Roelofs, made the case for eschewing the react-rails gem and instead going with browserify-rails.
0 kommentar(er)
