Webinar Recording: React.js from a Rails Developer’s Perspective
Hello everyone,
Today we have a useful and inspiring video for you: the recording of our most recent webinar, now available on YouTube JetBrainsTV channel.
Marcin Grzywaczewski, one of the authors of Rails meets React.js book, makes an introduction to React for Rails developers. He shows you how to work with React.js and create your own components, the building blocks of your user interface. All of this is backed by RubyMine. He also explains how you can benefit from the built-in JavaScript development capabilities and tools.
Useful Links
Please check out the slides and read the code: check out the code commit by commit or browse the whole repository.
Q&A
We’ve got a lot of interesting questions during the webinar. Andrzej Krzywda and Wiktor Mociun were also with us during the webinar and kindly answered questions. Here are the most interesting ones:
How will React.js be different with Rails 5 from what we have now?
Based on what I’ve seen, Rails 5 doesn’t introduce changes in the area which may change the React.js integration.
Will ActionCable in Rails 5 make a difference in how React.js is integrated with Rails?
You will need to implement the JS part in some way to make the connection possible; after you receive the data you just pass it to the React components. ActionCable doesn’t change much in the view part.
How does using React.js with Rails differ from using it with Node.js?
If you just use the backend as the API, there’s no big difference between Node and Rails here.
What is the best practice to embed React.js In Rails App? Is it using react_rails gem or is there a more native approach?
The gem is a great start. It is good enough if you don’t need anything more complex. However, when you go on a bigger codebase in JavaScript, you may think about extracting the whole JavaScript side into some Node application. You can move your JavaScript and React code to webpack and try one of many Rails <-> webpack integration.
Is there an existing thin layer between Rails and React to easily inject ActiveRecord models as JSON object in the views?
You can use any Rails serializer solution to turn the objects into JSON and expose them via an API or in HTML. Nothing React-specific is needed. Rails-react gem makes it very simple to use JSON to initialize a React component and pass those data as starting properties to the component.
Will Marcin present a bit more the Rails project structure when in “React mode”? How is it managed from an assets point of view?
You may look at this blogpost where we described it in more detail.
Ember is very easy to grasp for me because it follows convention over configuration like Rails. How does React compare?
I guess React will be much easier, as it is purely for the view layer of your application. And AFAIK, you can use Ember with React (though I have not tried it myself).
Is it possible to learn React.js without a good knowledge of Javascript?
Yes! You can learn JavaScript alongside React. It may be a bit painful sometimes, but you definitely can! :)
Are there any JS or React specific features in WebStorm that are not in RubyMine or IntelliJ? I know that JSX Harmony is supported across all three.
All features coming from WebStorm are also available in RubyMine and IntelliJ. You have support for ES-linter, some custom code inspections (check this blogpost ) and many more. I think it is enough for helping with React and JS. And there is a whole directory of additional plugins in the editor settings.
Is it possible to get the JS function to render a ERB partial? (Feels like it’d be good to separate the JS and HTML.)
I think you can just render stateless functions to render React components not using any state. This solution won’t be using ERB partial, but you can move its code (ERB partial’s code) entirely to the JS codebase as JSX code.
Would you recommend starting with TDD for React?
I think it’s good to start TDDing with React. You can try using shallow rendering technique or integration testing (which may be a bit painful).
Is there a way to separate the “view” (JSX) from the behavior (the functions, etc, rest of the component) in the dev environment?
I’m definitely a novice when it comes to React but I’m not sure that’s relevant. I’m coming to this from the perspective of a mostly front-end developer and I am a big fan of the separation of concerns: content and markup (HTML), formatting and style (CSS), and behavior (JS). JSX as I’ve seen it, JSX is written directly into JS files even though it represents markup. There’s a lot that’s appealing about React, but I really don’t like the idea of writing full HTML(-ish) markup in the middle of my JavaScript. Is there a way to separate these things in development (even if they are compiled together in production)?
JSX is just a syntactic ‘sugar’ for a structure of a component tree. I think you can just leave it as it is, because it only looks as HTML.
Yes, I’ve seen React without JSX, but you’re still essentially laying out the entire markup of a component in your JavaScript, right? Any markup for a component must be written inside the JS? There’s no way to avoid this? I am sure there is a way to do it, but I did not really try to extract it. Especially if you need to show some small parts of components conditionally (like a component containing error if something goes wrong), it may be a bit harsh and painful to have it all extracted. The JSX was created to enable designers to code-up the UI.
Is ReactJS easier to learn compared to Angular, Ember, etc.?
I think it’s easier – it focuses on the view part only and it doesn’t force you to use it for everything. I found it less invasive and easier to start with.
It is mainly because React is just a library for constructing views. Angular and Ember are whole frameworks taking care of much more stuff (not only views).
So React is primarily the view layer, but you can do some light logic like what’s being demo’ed right know. When is the right time to use something like RefluxJS? Do you recommend other tools if your apps grow larger?
We recommend Redux for the data management part. I think the time is if you are doing something more complex than just displaying data (e.g. sending some AJAX requests). You can use RefluxJS if it is good for you. There are lots of different flux architecture implementations (like RefluxJS). I personally use Redux with some custom architecture to control the flow using some event-bus for controlling the flow of data.
Rails uses CoffeeScript by default; how do you change it to JS? Remove the gem and rename the file extension?
That should do the trick. However, if you want to use EcmaScript2015, it may be a bit more complicated.
If you use the react-rails gem, then changing the file extension was enough for me, also for ES2015.
Books from Arkency
Use the discount code JETBRAINS_REACT_WEBINAR to buy Arkency React e-books at 35% off (valid through April 12th so hurry!).
Sincerely yours,
The RubyMine Team
Subscribe to RubyMine Blog updates
