{"id":3306,"date":"2018-03-21T04:55:34","date_gmt":"2018-03-21T04:55:34","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=3306"},"modified":"2026-03-27T17:13:46","modified_gmt":"2026-03-27T11:43:46","slug":"how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/","title":{"rendered":"How to add React JS to your Ruby on Rails App with Webpacker"},"content":{"rendered":"\n<p>This tutorial will guide you on how to create a Ruby on Rails application and add the power of <a href=\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\" target=\"_blank\" rel=\"noopener noreferrer\">webpacker<\/a> and <a href=\"https:\/\/github.com\/facebook\/react\" target=\"_blank\" rel=\"noopener noreferrer\">React JS<\/a> to it.<\/p>\n\n\n\n<p>Let&#8217;s have a brief introduction to <b>Webpacker<\/b> and <b>React JS.<\/b> If you are familiar with React JS and Webpacker directly go to <b>Implementation<\/b> section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is React JS?<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>React JS is a <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript<\/a> library for building user interfaces and is developed by <b>Facebook<\/b>.<\/li><li>React allows developers to create <b>large web-applications<\/b> that use data and can change over time without reloading the page.<\/li><li>It aims primarily to provide <b>speed<\/b>, <b>simplicity<\/b> and <b>scalability<\/b>. React processes only user interfaces in applications.<\/li><li>It corresponds to <b>View<\/b> in the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\" target=\"_blank\" rel=\"noopener noreferrer\">Model-View-Controller (MVC)<\/a> pattern.<\/li><\/ul>\n\n\n\n<p>You can find the list of sites that use React JS <a href=\"https:\/\/github.com\/facebook\/react\/wiki\/Sites-Using-React\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. It includes <a href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook<\/a>, <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram<\/a>, <a href=\"https:\/\/www.netflix.com\/in\/\" target=\"_blank\" rel=\"noopener noreferrer\">Netflix<\/a>, <a href=\"https:\/\/www.khanacademy.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Khan Academy<\/a>, <a href=\"https:\/\/asana.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Asana<\/a> etc. to name a few.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"335\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/sound-interesting.jpeg\" alt=\"sounds interesting\" class=\"wp-image-13768\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/sound-interesting.jpeg 568w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/sound-interesting-300x177.jpeg 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><\/figure><\/div>\n\n\n\n<h6 class=\"infinite-center-align wp-block-heading\">PC: <a href=\"https:\/\/imgflip.com\/i\/r8qh2\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/imgflip.com\/i\/r8qh2<\/a><\/h6>\n\n\n\n<div class=\"infinite-center-align\">Yeahhh.. That&#8217;s cool!!!<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Why React JS?<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Simplicity:<\/b> No complex two-way data flow.<\/li><li>Uses simple <b>one-way reactive data flow<\/b>.<\/li><li><b>Performance:<\/b> React is fast!<\/li><li>Real DOM is slow.<\/li><li>JavaScript is fast.<\/li><li>Using <a href=\"https:\/\/hackernoon.com\/virtual-dom-in-reactjs-43a3fdb1d130\" target=\"_blank\" rel=\"noopener noreferrer\"><b>virtual DOM<\/b><\/a> objects enables fast batch updates to real DOM, with great <b>productivity gains<\/b> over <b>frequent cascading updates<\/b> of DOM tree.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>If your page uses a lot of fast updating data or real time data\u200a-\u200aReact is the way to go.<\/p><\/blockquote>\n\n\n\n<p>That&#8217;s a small introduction about React JS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is webpacker?<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"439\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/static-module-bundler.png\" alt=\"static module bundler\" class=\"wp-image-13770\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/static-module-bundler.png 800w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/static-module-bundler-300x165.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/static-module-bundler-768x421.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption>PC: <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/webpack.js.org\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p>At its core, <i><b>webpacker<\/b><\/i> is a <i><b>static module bundler<\/b><\/i> for modern JavaScript applications. It is responsible to bundle all our <code>.jsx<\/code>, <code>.sass<\/code>, <code>.hbs<\/code> etc. code into normal js and css that our browser understands after necessary pre-compilation.<br><\/p>\n\n\n\n<h6 class=\"infinite-center-align wp-block-heading\"><\/h6>\n\n\n\n<ul class=\"wp-block-list\"><li>Webpacker makes it easy to use the JavaScript pre-processor and bundler <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">webpack 3.x.x+<\/a> to manage application-like JavaScript in Rails.<\/li><li>It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continues to live in app\/assets).<\/li><li>However, it is possible to use Webpacker for CSS, images and fonts assets as well, in which case you may not even need the asset pipeline.<\/li><li>This is mostly relevant when exclusively using component-based JavaScript frameworks.<\/li><\/ul>\n\n\n\n<p>That was a small introduction to webpacker. Now, let&#8217;s start creating the rails app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Technology Stack<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Technology<\/b>: Ruby on Rails.<\/li><li><b>Versions<\/b>: Rails: 5.1.5 , Ruby: 2.4.1.<\/li><li><b>Git Repo<\/b>: <a href=\"https:\/\/github.com\/AnkurVyas-BTC\/rails-react-webpacker\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/AnkurVyas-BTC\/rails-react-webpacker<\/a>.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">$ rails new rails-react-webpacker\n$ cd rails-react-webpacker<\/pre>\n\n\n\n<p>Add <code>webpacker<\/code> and <code>react-rails<\/code> to your <code>Gemfile<\/code> and run the installers.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ bundle install\n$ rails webpacker:install\n$ rails webpacker:install:react\n$ rails generate react:install<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"234\" height=\"285\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Javascript-folder-structure.png\" alt=\"Javascript folder structure\" class=\"wp-image-13772\"\/><\/figure><\/div>\n\n\n\n<p>After the successful completion the of the above commands. You will have the directory structure like below image.<br><\/p>\n\n\n\n<h6 class=\"infinite-center-align wp-block-heading\">Javascript folder structure.<\/h6>\n\n\n\n<div>All of our React components shall go to <code>app\/javascript\/components\/<\/code> directory.<\/div>\n\n\n\n<p>The content of <code>app\/javascript\/packs\/application.js<\/code> is as following.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/adea7c0267842c8d768bf9f4b64378e0.js\"><\/script><\/p>\n\n\n\n<p>The line <code>var componentRequireContext = require.context(\"components\", true)<\/code> makes the react components available to our rails app.<\/p>\n\n\n\n<p>Now, we just need to add the above file into our application layout file at <code>app\/views\/layouts\/application.html.erb<\/code>.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/d9db266b750076c97c05f16b7daa69a1.js\"><\/script><\/p>\n\n\n\n<p>Let&#8217;s create a home controller with index method. We will mount our first react component to <code>app\/views\/home\/index.html.erb<\/code> file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ rails g controller home index<\/pre>\n\n\n\n<p>Now, let&#8217;s create our first React Component.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">rails g react:component GreetUser name:string<\/pre>\n\n\n\n<p>Running the above command will create our first react component at <code>app\/javascript\/components\/GreetUser.js<\/code>.<\/p>\n\n\n\n<p>Now, replace contents of <code>app\/javascript\/components\/GreetUser.js<\/code> to match below.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/f45ffd1027a9bc280378ff7eae7d653d.js\"><\/script><\/p>\n\n\n\n<p>In above file the <code>GreetUser<\/code> component is expecting <code>name<\/code> props.<\/p>\n\n\n\n<p>Now, to add the component to view we need to use the <code>react_component<\/code> helper. So change the contents of <code>app\/views\/home\/index.html.erb<\/code> to match below.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/AnkurVyas-BTC\/f99e36b380c313d8e7d0b07f4bd5fbe7.js\"><\/script><\/p>\n\n\n\n<p>Now, this calls our <code>GreetUser<\/code> component and passes the <code>name<\/code> (here &#8216;<code>Ankur<\/code>&#8216;) as a <code>props<\/code> to our component.<\/p>\n\n\n\n<p>Now, visit <code>localhost:3000\/home\/index<\/code> you should see the following screen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"219\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/First-React-Component.png\" alt=\"First React Component!\" class=\"wp-image-13774\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/First-React-Component.png 470w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/First-React-Component-300x140.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><figcaption>First React Component!<\/figcaption><\/figure><\/div>\n\n\n\n<h6 class=\"infinite-center-align wp-block-heading\"><\/h6>\n\n\n\n<p>If you have added <a href=\"https:\/\/github.com\/facebook\/react-devtools\" target=\"_blank\" rel=\"noopener noreferrer\">React Developer Tools<\/a> to your browser. Then you must see the output as the following snap.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"407\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/React-component-view-from-React-Developer-Tools..png\" alt=\"React component view from React Developer Tools\" class=\"wp-image-13776\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/React-component-view-from-React-Developer-Tools..png 1000w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/React-component-view-from-React-Developer-Tools.-300x122.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/React-component-view-from-React-Developer-Tools.-768x313.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>React component view from React Developer Tools<\/figcaption><\/figure><\/div>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\"><\/h6>\n\n\n\n<p>You can find the whole github code <a href=\"https:\/\/github.com\/AnkurVyas-BTC\/rails-react-webpacker\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n\n\n\n<p>So start using React JS with Rails and feel the difference!!!<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.botreetechnologies.com\/ruby-on-rails-development\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for more details&#8230;<\/a><\/strong><\/p>\n\n\n\n<p>At <a href=\"https:\/\/www.botreetechnologies.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">BoTree Technologies<\/a>, we build enterprise applications with our RoR team of 25+ engineers.<\/p>\n\n\n\n<p>We also specialize in RPA, AI, Python, Django, JavaScript and ReactJS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noopener noreferrer\">Consulting is free<\/a> &#8211; let us help you grow!<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will guide you on how to create a&#8230;<\/p>\n","protected":false},"author":9,"featured_media":13765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,10],"tags":[],"class_list":["post-3306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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>How to add React JS to your Ruby on Rails App with Webpacker<\/title>\n<meta name=\"description\" content=\"This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it. Let&#039;s Talk About That!\" \/>\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\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add React JS to your Ruby on Rails App with Webpacker\" \/>\n<meta property=\"og:description\" content=\"This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it. Let&#039;s Talk About That!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\" \/>\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=\"2018-03-21T04:55:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-27T11:43:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ankur Vyas\" \/>\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=\"Ankur Vyas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\"},\"author\":{\"name\":\"Ankur Vyas\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\"},\"headline\":\"How to add React JS to your Ruby on Rails App with Webpacker\",\"datePublished\":\"2018-03-21T04:55:34+00:00\",\"dateModified\":\"2026-03-27T11:43:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\"},\"wordCount\":650,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg\",\"articleSection\":[\"Ruby on Rails\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\",\"name\":\"How to add React JS to your Ruby on Rails App with Webpacker\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg\",\"datePublished\":\"2018-03-21T04:55:34+00:00\",\"dateModified\":\"2026-03-27T11:43:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\"},\"description\":\"This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it. Let's Talk About That!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"reactjs rails webpacker\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add React JS to your Ruby on Rails App with Webpacker\"}]},{\"@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\/aa180b4d8d933949f15aba97d8d138a5\",\"name\":\"Ankur Vyas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"caption\":\"Ankur Vyas\"},\"description\":\"Ankur is a Ruby on Rails Developer and Practice Lead JavaScript. He loves Ruby, JavaScript, reading and writing blogs, problem-solving and taking ownership of work. Apart from coding he likes to listen to songs, gaming and traveling.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add React JS to your Ruby on Rails App with Webpacker","description":"This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it. Let's Talk About That!","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\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/","og_locale":"en_US","og_type":"article","og_title":"How to add React JS to your Ruby on Rails App with Webpacker","og_description":"This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it. Let's Talk About That!","og_url":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2018-03-21T04:55:34+00:00","article_modified_time":"2026-03-27T11:43:46+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg","type":"image\/jpeg"}],"author":"Ankur Vyas","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Ankur Vyas","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/"},"author":{"name":"Ankur Vyas","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5"},"headline":"How to add React JS to your Ruby on Rails App with Webpacker","datePublished":"2018-03-21T04:55:34+00:00","dateModified":"2026-03-27T11:43:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/"},"wordCount":650,"commentCount":0,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg","articleSection":["Ruby on Rails","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/","url":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/","name":"How to add React JS to your Ruby on Rails App with Webpacker","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg","datePublished":"2018-03-21T04:55:34+00:00","dateModified":"2026-03-27T11:43:46+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5"},"description":"This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it. Let's Talk About That!","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/03\/reactjs-rails-webpacker.jpg","width":1920,"height":1280,"caption":"reactjs rails webpacker"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add React JS to your Ruby on Rails App with Webpacker"}]},{"@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\/aa180b4d8d933949f15aba97d8d138a5","name":"Ankur Vyas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","caption":"Ankur Vyas"},"description":"Ankur is a Ruby on Rails Developer and Practice Lead JavaScript. He loves Ruby, JavaScript, reading and writing blogs, problem-solving and taking ownership of work. Apart from coding he likes to listen to songs, gaming and traveling."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3306","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=3306"}],"version-history":[{"count":2,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3306\/revisions"}],"predecessor-version":[{"id":13780,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3306\/revisions\/13780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/13765"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=3306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=3306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=3306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}