{"id":2053,"date":"2016-06-26T11:28:24","date_gmt":"2016-06-26T11:28:24","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=2053"},"modified":"2021-10-11T16:21:05","modified_gmt":"2021-10-11T10:51:05","slug":"integrating-reactjs-with-rails","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/","title":{"rendered":"Integrating ReactJS with Rails Application"},"content":{"rendered":"<p>There is lot of buzz(<a href=\"https:\/\/twitter.com\/hashtag\/reactjs?lang=en\" target=\"_blank\" rel=\"noopener noreferrer\">1<\/a>,\u00a0<a href=\"https:\/\/www.reddit.com\/r\/reactjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">2<\/a>) around ReactJS\u00a0and lot many tech companies\u00a0<a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">started using it in production<\/a>.\u00a0<a href=\"https:\/\/www.thoughtworks.com\/radar\/languages-and-frameworks\" target=\"_blank\" rel=\"noopener noreferrer\">Thoughtworks has already adopted and is strongly recommending to use it in production<\/a>.<\/p>\n<p>I am in love with React because of these\u00a07 strengths\u00a0of it. As a\u00a0<a href=\"https:\/\/www.botreetechnologies.com\/hire-ruby-on-rails-developers\" target=\"_blank\" rel=\"noopener noreferrer\">Rails developer<\/a>, If I have to choose one of the Javascript Framework in my project then I will go with React.<\/p>\n<p>In this post, I am going to explain how to integrate a ReactJS in a Rails application.<\/p>\n<p>Let&#8217;s start with creating a new Rails application<br \/>\n<code>rails new my_react_app<\/code><br \/>\nNow, Edit your Gemfile, add\u00a0<a href=\"https:\/\/github.com\/reactjs\/react-rails\" target=\"_blank\" rel=\"noopener noreferrer\">&#8216;react-rails&#8217;<\/a>\u00a0gem and bundle.<br \/>\n<code>gem 'react-rails'<\/code><br \/>\nThis gem gives a generator to install required scripts. So run following command to finish installation:<br \/>\n<code>rails g react:install<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-12827 size-full aligncenter\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-js.png\" alt=\"ReactJS with Rails\" width=\"592\" height=\"163\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-js.png 592w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-js-300x83.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/code><\/p>\n<p>It will insert three react specific files in your\u00a0<b>application.js<\/b> manifest file.<br \/>\n<code>\/\/= require react<br \/>\n\/\/= require react_ujs<br \/>\n\/\/= require components<\/code><br \/>\nand also creates a &#8216;component&#8217; directory inside app\/javascript directory where you will place all your React\u00a0components.<\/p>\n<p>Now just to ensure installation was working, I am going to demonstrate a small working\u00a0React\u00a0component with Rails. The component would display list of users with name, email, phone number.<\/p>\n<p>So lets create a User model,<br \/>\n<code>rails g model User name:string phone:string email:string<br \/>\nrake db:create<br \/>\nrake db:migrate<\/code><br \/>\nLet&#8217;s add some data to display from the console.<br \/>\n<code>User.create(name: 'Nishant', email: 'nishant@mail.com', phone: '123\u2013456\u20137890')<\/code><\/p>\n<p>User.create(name: &#8216;John&#8217;, email: &#8216;john@mail.com&#8217;, phone: &#8216;321\u2013645\u20137840&#8217;)<br \/>\nNow, Create UsersController with index action to handle request from React component<br \/>\n<code>rails g controller users index<\/code><br \/>\nUpdate your route file for user resources.<br \/>\n<code>root 'users#index'<br \/>\nresources :users<\/code><br \/>\nModify index action to return list of users<br \/>\n<code>def index<br \/>\n@ users= User.all<br \/>\nend<br \/>\n<\/code><br \/>\nCreate index.html.erb file inside views\/users and add following line:<br \/>\n<code>&lt;%= react_component 'Users', { data: @ users} %&gt;<\/code><br \/>\nNote: This helper method is provided by react-rails gem.<\/p>\n<p>Now start the server and hit\u00a0<code>http:\/\/localhost:300<\/code> 0. Check generated HTML in view source or browser&#8217;s development tool. You would find something similar like shown below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12828 size-full\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-rails-gem.png\" alt=\"react rails gem\" width=\"900\" height=\"205\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-rails-gem.png 900w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-rails-gem-300x68.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/react-rails-gem-768x175.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p><i>react_component<\/i>\u00a0helper of react_ujs will identify that we are trying to render a React component so it will be instantiated by it with the attributes we sent through react_component, in our case, the contents of @users<\/p>\n<p>Now lets write a React component to render users.<\/p>\n<p>Create a\u00a0<i>users.js<\/i>\u00a0file inside assets\/javascripts\/components and add following code inside it,<br \/>\n<code>this.User = React.createClass({<br \/>\nrender: function() {<br \/>\nreturn React.DOM.div({<br \/>\nclassName: \u2018records\u2019<br \/>\n}, React.DOM.h2({<br \/>\nclassName: \u2018title\u2019<br \/>\n}, \u2018Records\u2019));<br \/>\n}<br \/>\n});<br \/>\n<\/code><\/p>\n<blockquote><p>For above code you can also use JSX syntax but I prefer using the React.DOM syntax over JSX because the code will arrange in a hierarchical structure by itself, similar to HAML. On the other hand, if you are trying to integrate React into an existing application built with erb, you have the option to reuse your existing erb code and convert it into JSX.<\/p><\/blockquote>\n<p>Refresh your browser screen, and you will see &#8220;User&#8221; title.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-12830 size-full\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/user-react-js.png\" alt=\"user react js\" width=\"651\" height=\"213\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/user-react-js.png 651w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/user-react-js-300x98.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/p>\n<p>Perfect! We have rendered our first React Component.<\/p>\n<p>Now, it&#8217;s time to display users&#8217; details.<\/p>\n<p>Besides the render method, React components rely on the use of properties to communicate with other components and states to detect whether a re-render is required or not.<\/p>\n<p>We need to initialize our component&#8217;s state and properties with the desired values:<br \/>\n<code>...<br \/>\ngetInitialState: function() {<br \/>\nreturn {<br \/>\nusers: this.props.data<br \/>\n};<br \/>\n},<br \/>\ngetDefaultProps: function() {<br \/>\nreturn {<br \/>\nusers: []<br \/>\n};<br \/>\n},<br \/>\n...<br \/>\n<\/code><br \/>\nThe method\u00a0<b>getDefaultProps<\/b>\u00a0will initialize our component&#8217;s properties in case we forget to send any data when instantiating it, and the\u00a0<b>getInitialState<\/b>method will generate the initial state of our component.<\/p>\n<p>Now we need to actually display the records provided by our Rails view. We have to create a new User component to display each individual record,<\/p>\n<p>Create a new file user.js under the\u00a0<b>javascripts\/components\/<\/b>\u00a0directory and insert the following contents:<br \/>\n<code>this.User = React.createClass({<br \/>\nrender: function() {<br \/>\nreturn React.DOM.tr(null,<br \/>\nReact.DOM.td(null, this.props.record.name),<br \/>\nReact.DOM.td(null, this.props.record.email),<br \/>\nReact.DOM.td(null, this.props.record.phone)<br \/>\n);<br \/>\n}<br \/>\n});<br \/>\n<\/code><br \/>\nNow, Add below changes in components\/users.js<br \/>\n<code>\u2026<br \/>\nrender: function() {<br \/>\nvar user;<br \/>\nreturn React.DOM.div({<br \/>\nclassName: \u2018users\u2019<br \/>\n}, React.DOM.h2({<br \/>\nclassName: \u2018title\u2019<br \/>\n}, \u2018Users\u2019), React.DOM.table({<br \/>\nclassName: \u2018table\u2019<br \/>\n}, React.DOM.thead(null,<br \/>\nReact.DOM.tr(null, React.DOM.th(null, \u2018Name\u2019),<br \/>\nReact.DOM.th(null, \u2018Email\u2019),<br \/>\nReact.DOM.th(null, \u2018Phone\u2019))),<br \/>\nReact.DOM.tbody(null, (function() {<br \/>\nvar i, len, ref, results;<br \/>\nref = this.state.users;<br \/>\nresults = [];<br \/>\nfor (i = 0, len = ref.length; i &lt; len; i++) {<br \/>\nrecord = ref[i];<br \/>\nresults.push(React.createElement(User, {<br \/>\nkey: record.id,<br \/>\nrecord: record<br \/>\n}));<br \/>\n}<br \/>\nreturn results;<br \/>\n}).call(this))));<br \/>\n}<br \/>\n\u2026<br \/>\n<\/code><br \/>\nHere I have added a table with table headers and for each individual user a User &#8216;component&#8217; is getting created which is nested with parent(table)<\/p>\n<p>We are also adding key property and passing id to handle this dynamic children.<\/p>\n<p>Now refresh your browser again and see the result.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12831\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/local-host-300x115.png\" alt=\"users - local host\" width=\"300\" height=\"115\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/local-host-300x115.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/local-host.png 576w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Voila!! We rendered data using React component backed by beloved Rails.<\/p>\n<p>I know it looks brittle but in my next post we will integrate it with\u00a0<a href=\"https:\/\/www.material-ui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">material-ui.<\/a>\u00a0So keep in touch!<\/p>\n<p>Complete Source code is available a\u00a0<a href=\"https:\/\/github.com\/NishantUpadhyay-BTC\/react_demo\" target=\"_blank\" rel=\"noopener noreferrer\">github repository<\/a>.<\/p>\n<hr \/>\n<h3><a href=\"https:\/\/www.botreetechnologies.com\/ruby-on-rails-development\"><b>Click here for more<\/b>\u00a0details\u2026<\/a><\/h3>\n<h3><a href=\"https:\/\/www.botreetechnologies.com\/contact\">Consulting is free<\/a>\u00a0\u2013 let us help you grow!<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>There is lot of buzz(1,\u00a02) around ReactJS\u00a0and lot many tech&#8230;<\/p>\n","protected":false},"author":4,"featured_media":12825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,73,10],"tags":[],"class_list":["post-2053","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","category-ruby-on-rails","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Integrating ReactJS with Rails Application<\/title>\n<meta name=\"description\" content=\"React.js is a good choice for frontend production. Here&#039;s how Rails application development and React JS can be integrated.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating ReactJS with Rails Application\" \/>\n<meta property=\"og:description\" content=\"React.js is a good choice for frontend production. Here&#039;s how Rails application development and React JS can be integrated.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-26T11:28:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-11T10:51:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"525\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nishant Upadhyay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nishant Upadhyay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\"},\"author\":{\"name\":\"Nishant Upadhyay\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/5af799914f08fa3d67f69755fdd41467\"},\"headline\":\"Integrating ReactJS with Rails Application\",\"datePublished\":\"2016-06-26T11:28:24+00:00\",\"dateModified\":\"2021-10-11T10:51:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\"},\"wordCount\":660,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg\",\"articleSection\":[\"React JS\",\"Ruby on Rails\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\",\"name\":\"Integrating ReactJS with Rails Application\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg\",\"datePublished\":\"2016-06-26T11:28:24+00:00\",\"dateModified\":\"2021-10-11T10:51:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/5af799914f08fa3d67f69755fdd41467\"},\"description\":\"React.js is a good choice for frontend production. Here's how Rails application development and React JS can be integrated.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg\",\"width\":525,\"height\":350,\"caption\":\"ReactJS with Rails\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrating ReactJS with Rails Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/5af799914f08fa3d67f69755fdd41467\",\"name\":\"Nishant Upadhyay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/nishant-upadhyay-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/nishant-upadhyay-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/nishant-upadhyay-150x150.png\",\"caption\":\"Nishant Upadhyay\"},\"description\":\"Nishant is Practice Lead of Ruby on Rails. He is a Blogger, Mentor, and Rubyst. He has expertise in Javascript as well. He is highly skilled in designing, developing and testing web applications. He enjoys being challenged and engaging with projects that require him to work outside his comfort and knowledge set.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating ReactJS with Rails Application","description":"React.js is a good choice for frontend production. Here's how Rails application development and React JS can be integrated.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/","og_locale":"en_US","og_type":"article","og_title":"Integrating ReactJS with Rails Application","og_description":"React.js is a good choice for frontend production. Here's how Rails application development and React JS can be integrated.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2016-06-26T11:28:24+00:00","article_modified_time":"2021-10-11T10:51:05+00:00","og_image":[{"width":525,"height":350,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg","type":"image\/jpeg"}],"author":"Nishant Upadhyay","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Nishant Upadhyay","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/"},"author":{"name":"Nishant Upadhyay","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/5af799914f08fa3d67f69755fdd41467"},"headline":"Integrating ReactJS with Rails Application","datePublished":"2016-06-26T11:28:24+00:00","dateModified":"2021-10-11T10:51:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/"},"wordCount":660,"commentCount":1,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg","articleSection":["React JS","Ruby on Rails","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/","url":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/","name":"Integrating ReactJS with Rails Application","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg","datePublished":"2016-06-26T11:28:24+00:00","dateModified":"2021-10-11T10:51:05+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/5af799914f08fa3d67f69755fdd41467"},"description":"React.js is a good choice for frontend production. Here's how Rails application development and React JS can be integrated.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2016\/06\/integrating-reactjs-with-rails.jpeg","width":525,"height":350,"caption":"ReactJS with Rails"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/integrating-reactjs-with-rails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Integrating ReactJS with Rails Application"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/5af799914f08fa3d67f69755fdd41467","name":"Nishant Upadhyay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/nishant-upadhyay-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/nishant-upadhyay-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/nishant-upadhyay-150x150.png","caption":"Nishant Upadhyay"},"description":"Nishant is Practice Lead of Ruby on Rails. He is a Blogger, Mentor, and Rubyst. He has expertise in Javascript as well. He is highly skilled in designing, developing and testing web applications. He enjoys being challenged and engaging with projects that require him to work outside his comfort and knowledge set."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/2053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=2053"}],"version-history":[{"count":5,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/2053\/revisions"}],"predecessor-version":[{"id":16534,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/2053\/revisions\/16534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/12825"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=2053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=2053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=2053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}