I'm building an app using the react-rails gem. This means all assets flow through the rails asset pipeline. In order to access 3rd party javascript libraries, I've been taking advantage of rails-assets.org which bundles javascript packages from bower into your rails environment. Most packages can just be called directly in your javascript code.
So if you add package, take marked the markdown library, you include it like:
gem 'rails-assets-marked', source: 'https://rails-assets.org'
And then can easily call it from any js file in your rails app like:
console.log(marked('I am using __markdown__.'));
However, how do you use packages which are not functions but instead are react components? In a node app, you'd use require() like below. Here's an example with react-clipboard:
var Clipboard = require("react-clipboard");
var App = React.createClass({
render: function() {
return (
<div>
<Clipboard value='some value' onCopy={some function} />
</div>
);
},
But, what do you do to accomplish this in a Rails app?
Even though the package is included in the rails asset pipeline, the react component Clipboard isn't available in JSX. How does one make it available?
There is no way to accomplish this directly using rails only.
To be able to use require("react-clipboard"), one solution (the less intrusive) would be to use a combination of rails, react-rails and browserify as explained here:
http://collectiveidea.com/blog/archives/2016/04/13/rails-react-npm-without-the-pain/
and here
https://gist.github.com/oelmekki/c78cfc8ed1bba0da8cee
I did not re paste the whole code example as it is rather long and prone to changes in the future
Related
I am using React Js with rails 5.0
Important Gems are
gem 'rails', '~> 5.0.2'
gem 'react-rails'
gem 'react-router-rails'
gem 'slim-rails'
my layout and page template is in slim and I am using coffee everywhere.
I am facing lots of problem when I am using react router.
List of questions are:
I want to get a clean approach like angular where I can use module + controller + views in react. Can be it possible?
As now I am using react-router but the thing is that when it send request to the server so request comes to my action controller, action view and layout but does not load react components.
I am not able to use new packages like react-validation( https://www.npmjs.com/package/react-validation). How can I use react packages.
In react routing I want to send request on server and then it loads components which is exist on that action view.
Suggest me for the best approach of using react js + rails
Let's start with the basics, and I apologize if it sounds too basic.
'React' can be viewed as the Facebook JavaScript libraries, the set of JavaScript libraries put out by a community of React users, or the base design philosophy of nested component rendering and tag based caching.
JavaScript is inherent to React libraries, but not to its philosophy.
React on Ruby can be viewed as copying the philosophy or of cross-compiling to or generating JavaScript, or possibly emulating JavaScript in Ruby.
React is inherently a 'View' component, with additional libraries use a component and JSX approach to other capabilities. React-router is such a library.
React is not Angular. Angular is more of an MVC framework.
You probably want to go down these paths:
* Acquire the ability to code in JavaScript. Running on the browser implies code in JavaScript.
* Use Rails only as a server side REST or GraphQL endpoint. Alternately, use Rails to emit JavaScript and then use as REST or GraphQL endpoint.
* Non JavaScript code will not be able to use the latest JavaScript libraries.
It's good to think of the possibilities of what can be done, and this question suggests you are exploring.
I'm working on a Ruby on rails 4 project where we are using React/Redux for frontend. We are using Webpack and gulp for compiling javascript and css. We do not use rails Asset pipeline at all, it is disabled from config. All assets compile to public folder and directly included on views. Now all react components are rendering on client side. It is having his own disadvantages like visual flicks before js is fully loaded and problems on passing initial props from backend to frontend.
Is there any good way to compile react components on server side without using asset pipeline and passing props directly from rails views?
I am pretty sure http://reactrb.org does this, but it does use asset pipeline. The webpack components are brought in to the rails side, and then wrappers are automatically built so you can interface to the webpack components from your client side ruby components.
There was a lot of discussion on this at https://gitter.im/reactrb/chat and I don't know the details.
Also tutorial here: http://tutorials.pluralsight.com/ruby-ruby-on-rails/reactrb-showcase dealing with this issue as well.
So you could just use http://reactrb.org or figure it by reading their code.
I have a rails app currently using webpack to create a bundle.js file that is picked up by the asset pipeline.
If I have a page that needs a react component embedded in it, where is the best place to actually call React.render? The react-rails gem does a great job of doing this unobtrusively, but with webpack I just have an entry.js file. Embedding a <script> tag in the page seems wrong (and also doesn't work because the JSX isn't transpiled). Is the right approach to jus have a script (probably in entry.js) that looks for certain placeholders on the page and replaces them with react components on page load?
thanks!
Yes. If you look at the react-starter-kit repo which people have started to use when they begin a new project, the recommended minimalistic way is having a div after your body and loading the bundled js afterwards.
I just want to know how to include frameworks like angularjs, polymer js, bootstrap.... Into rails app without adding corresponding gems. Reason is the gems that are available are changing and some of them are given up. So instead of gem I want to download the library files given by the vendor directly. How to add them into rails app?
You can download the framework source files/folders, add them to your vendor folder and require those. Thats essentially what those gems do. If you're looking for a more advanced approach you can look into setting up a package manager like gulp and use the direct npm packages
To include Angular in rails, I can think of three basic methods:
Use gem 'angularjs-rails' (which no one seems to do).
Download Angular, add it to /vendor and manually include it.
Use Bower to require it and then manually include.
I suppose the advantage of Bower is just the dependency model but apart from that, why would I pick any one of these over any of the other options?
A good approach is to use Rails Assets.
From their website:
Rails Assets is the frictionless proxy between Bundler and Bower.
It automatically converts the packaged components into gems that are
easily droppable into your asset pipeline and stay up to date.