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.
Related
I am a little confused on this.
If in Rails, with erb files we can build pages layout, 1) in what situations would we use webpacker to add vue.
What i understand so far is a Vue application would at times make a request to the server lets say to populate data. 2) Would that be the only use or are they other uses cases?
Also 3) is it best to generate a vue or angular app as a standalone (like vue create app so vue is in a front end folder and rails in a backend folder) or to use webpacker in rails
I'll try and answer your three questions at once, hope that's ok!
There are three common ways you can integrate Vue.js (or any JavaScript) library into a Rails application:
You can load it through sprockets, which is the built-in Rails asset packaging library. You would do this if your application is mostly going to be statically rendered and NOT a SPA (Single Paged Application). Sprockets is very tightly integrated with Rails, allowing you to refer to assets in your Rails templates and code. However, Sprockets is quite far behind Webpack in terms of the actual bundling/packaging, optimizations, and ease of use for any complex JS project. So you would only want to do this if you're adding a tiny amount of interactivity to a mostly static website.
You can load it through Webpacker. The idea of Webpacker is to give you a really easy way to start building a SPA with a rails backend. So you receive all the benefits of Webpack but don't need to tweek many configurations (at the start), or set up a separate web server, or worry about CORS. It's great for starting a new project/prototyping in or progressively integrating Vue.js into a larger static website. The downside is that Webpacker uses webpacker.yml for its default configuration which adds unnecessary confusion when you will eventually need to have more complex configs.
Finally you can load it through a separate web server ("standalone"), and in the long run, this will give you the greatest degree of freedom through less Webpacker middleware and access to the most updated webpack version. It also offers you the ability to scale, secure, and do fancy stuff like Server Side Rendering. The downside is this does require the most upfront setup and long-term maintenance time. AFAIK this is the most common way companies serve SPAs.
I just want to share with you an uncomfortable situation that I'm having right now and ask you for advice. It turns out that I'm developing a kind of old project by using rails 3.2 and ruby 2.0. Until now, as usual I've been creating the view layer with haml markup language. Recently I was assigned to implement a new set of UI requirements that seems to be a little complicated. So I was wondering if I could use the react library to do that. I'm using the react-rails gem to facilitate the integration and it works fine. But the problem comes in when I try to use a third party library like react-dropzone or react-modal or whatever react library. I have not been able to get it to work neither using rails-assets gems nor downloading directly the /dist files and require them with sprockets. Some of the errors that I get are:
typeError: undefined is not an object (evaluating 'webpack_require(3).unstable_renderSubtreeIntoContainer')
Can not find module 'react'
I don't know if I can easily setup a webpack server to compile these react libraries and then can be used along with react-rails and the specific version of rails 3.2. I've searched about the subject and I found the webpacker gem but it requires at least rails 4.2. I appreciate any comment or observation about what should I do.
I've finally solved my problem by using react_on_rails gem which allows an easy integration of React + Webpack + Rails, and also includes the server side rendering option.
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
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.
Is there any gem available for implementing view components in Rails? I had look at 'cells' and 'apotomo'. I found them good but documentation is not updated for the latest versions. Any one knows about any other good gem for implementing widgets kind of structures in rails?
You can use React js for view level components , use react-rails to integrate it with rails
If you are concerned with performance, you should try solutions like Angular.js , Backbone.js, React.js, Ember.js or any front end MVC framework.
Your code can be organized and run faster than use Apomoto or Rails partials, for example.