Learning React.js with Ruby on Rails mindset: Try the Partials way!

Saurav Prakash
Aug 8, 2017 · 5 min read

I have tried it before, failed so many times, got pissed, and moved on. Got back again after some more practice and learned it again and learning it again. I am talking about front end frameworks. Mainly react and my struggles due to its perceived contrast from a rails point of view at first and then having the AHA moment which is helping me out now to learn react in easy rails kinda way.

I hope the similarities I am talking about here help someone who is facing the problems of spaghetti front end codes in his rails app and why try the react way (I am also a beginner in react world). As a prelude, I enrolled in Stephen Grider’s Udemy course as well as Justin Gordon’s course on react on rails but honestly I didn’t understand why I would use react, like why should I change the way things are done in rails world to the ways of the JavaScript world ?

Finally, today while working on an app with a lot of interdependent partials, I felt a need of components and their superior synchronizations and so started re watching the courses again. Finally, I had an epiphany! The best way which is working for me to understand the react flow is to compare react components and ReactDOM with the process of using partials in rails or django . That’s what I want to draw your attention to. Let me explain through some examples.

Example 1:

Rails Way

Step 1: Create a partial (component)

_reusethis.html.erb

We will have a simple code inside the partial:

<div>
hello <%= lola %>
</div>

Step 2: Render it on index page

In the index page, I wanna showcase this component and pass a variable(prop as called in react world), I will select the div in which I wanna showcase this and put the following code inside:

<div id = “app”>

<%= render ‘reusethis’, lola: “Viewers!” %>

</div>

We can also use instance variables from controller and pass it here as well

<%= render ‘reusethis’, lola: @var %>

where, @var = “Viewers!” (say)

Voila! we got what we wanted!!

Now, lets dive into react world and compare it with same requirements

React Way

Step 1: Create a component

var Hello = React.createClass({ // We can also have a function instead
render : function(){
return (
<div>
hello {this.props.name}
</div>
)
}

});

Step 2: Render it on index page

ReactDOM.render(<Hello name =’viewers!’ />, document.getElementById(‘app’));

where, in the index page we already have a div with id ‘app’

<div id = ‘app’></div>

Did you see the similarities?

  1. I made a reusable component
  2. Then I used a placeholder variable inside the component
  3. For rendering, I passed whatever variable I wanted on the final page

Makes sense?

Example 2:

What about states? Lets try a real world example of simple name showcase. Now, here is what I feel react has an upper hand. This is the exact moment of introducing spaghetti code in rails domain, which react solves thanks to its sleeker syntax and library.

Lets create a form partial (I always use rails-bootstrap-forms gem by Matt Brictson , I love it!)

Requirement: What I want is, whenever the state of the field in form changes and user is done typing I want to update the name in a div with id content

Rails Way

Step 1: generate the partial

_form.html.haml

Inside, we have

= bootstrap_form_for @product do |f|

.field
= f.text_field :name, :label => “Name”, placeholder: “Fill in Name”

.actions
= f.submit ‘Save’, :class => “btn btn-primary”

lets say we have a div with id content

<div id = “content”></>

Now, I want it such that whenever the state of name field changes I want to set the div content value as new value from form field. We can bind the two but lets just use on change callback for setting contents of a div.

Step 2: Use an external java script to handle on change event.

:javascript
$(document).ready(function(){

$(document).on(“change”, “input#name”, function(e){

$(“#content”).innerHTML = $(“input#name”).value;

});
});

Step 3: Use the partial in your main file

<%= render ‘form’ %>

I can also place this java script file in a separate js file in assets folder for sleeker way in rails but we need to run it only when form is loaded.

As I saw, for every such action, and in turn increased complexity, my partial files were getting more complex and not easy to manage and read even by myself. It was becoming a pain to bind them all together and that’s another weapon react has in its arsenal.

React Way

If I do the same thing in react, it will be something like:

Step 1: generate the component

var Hello = React.createClass({

getInitialState: function(){
return{
name: ‘’
}

},

changeName: function(e){
this.setState({
name: e.target.value //e is event, target is input, value is the new value
})
},
render: function(){
return(
<div>
<form>
<input
onChange = {this.changeName}
value = {this.state.name} />
}
</form>
<p>hello {this.state.name}!</p>
</div>
)
}

});

Wait! This component handled all the on change event in itself!!

Also, I don’t need to check for the presence of form or other such checks, i just take the whole component and reuse it anywhere.

Step 2: Finally calling it

ReactDOM.render(<Hello name />, document.getElementById(‘app’));

As we see, react condenses the code in a much better way in one place and thus increases the overall performance, re-usability and readability in the asset pipeline.

I am exploring more and more each day and will write about what I learned in terms of similarities between two frameworks and how rails developer can use these similarities to be good with react as well.

For now, I just know

for every thought of creating a partial, create react component instead ;)

Hope it helps someone out :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade