<p>Modern Javascript uses a lot of libraries and processing tools, including NPM, Yarn and Webpack. So when you use React, you need all these tools. Rails has had the asset pipeline for a long time and used Sprockets as the main tool.</p> <p>Since Rails 5.1 there's an alternative to Sprockets for Javascript: Webpacker. In Rails 6.0, Webpacker became the default. It uses Webpack to compile all your Javascript files.</p> <p>One of the big advantages of Webpack is that, in your development environment, it offers live Javascript compilation via webpack-dev-server. You change a file and it gets compiled automatically and even pushed to the browser. This makes development really fast. Of course, in production you want pre-compilation, bundling all Javascript files into a single minified one.</p> <p>Here I'll show how to create a Ruby on Rails app from scratch with Webpacker and set up ReactJS through Webpacker.</p> <h2> What we'll need </h2> <ol> <li>Ruby 2.5.1 or higher</li> <li>Rails 5.2.1 or higher</li> <li>Webpacker 3.5.5 or higher</li> </ol> <h2> Creating the app </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>rails new rails-with-reactjs <span class="nt">--skip-test</span> <span class="nt">--webpack</span> </code></pre> </div> <p>This command creates the app and sets up Webpacker. It skips the test structure.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>bundle <span class="nb">exec </span>rails webpacker:install:react </code></pre> </div> <p>This installs and configures ReactJS as follows:<br></p> <ul> <li>Adds babel config at the root</li> <li>Creates an example at <code>app/javascript/packs/hello_react.jsx</code> </li> <li>Updates Webpacker config to accept <code>.jsx</code> files</li> <li>Installs all the dependencies React needs</li> </ul> <p>The generated <code>hello_react.jsx</code> example injects a component directly into the app's <code>&lt;body&gt;</code>. I find this pointless, with no structure, and if we use it the component shows up on every page. So I always ignore it and use a folder structure separating all React components inside it. To use a component I rely on a helper from the <code>react-rails</code> gem.</p> <h2> Configuring ReactJS </h2> <p>Add to your <code>Gemfile</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight ruby"><code><span class="n">gem</span> <span class="s1">'react-rails'</span> </code></pre> </div> <p>After saving the file don't forget to run <code>bundle install</code> to download and install the gem.</p> <p>Install <code>react_ujs</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>yarn add react_ujs </code></pre> </div> <p><code>react_ujs</code> is a driver from <code>react-rails</code>. It scans the page and mounts components using <code>data-react-class</code> and <code>data-react-props</code>.</p> <p>Now let's create a simple structure to keep components organized and build our component.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="nb">mkdir </span>app/javascript/components <span class="nb">touch </span>app/javascript/components/hello_world.jsx </code></pre> </div> <p>Inside <code>hello_world.jsx</code> add the following code:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span> <span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nc">HelloWorld</span> <span class="kd">extends</span> <span class="nc">Component</span> <span class="p">{</span> <span class="nf">render</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Hello World<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </div> <p>To call the component from within a page, we need to add the following config at the end of:<br> <code>app/javascript/packs/application.js</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="kd">const</span> <span class="nx">componentRequireContext</span> <span class="o">=</span> <span class="nx">require</span><span class="p">.</span><span class="nf">context</span><span class="p">(</span><span class="dl">'</span><span class="s1">components</span><span class="dl">'</span><span class="p">,</span> <span class="kc">true</span><span class="p">)</span> <span class="kd">const</span> <span class="nx">ReactRailsUJS</span> <span class="o">=</span> <span class="nf">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">react_ujs</span><span class="dl">'</span><span class="p">)</span> <span class="nx">ReactRailsUJS</span><span class="p">.</span><span class="nf">useContext</span><span class="p">(</span><span class="nx">componentRequireContext</span><span class="p">)</span> </code></pre> </div> <p>In:<br> <code>app/views/layouts/application.html.erb</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight erb"><code># Remove the asset pipeline javascript. <span class="cp">&lt;%=</span> <span class="n">javascript_include_tag</span> <span class="s1">'application'</span><span class="p">,</span> <span class="s1">'data-turbolinks-track'</span><span class="p">:</span> <span class="s1">'reload'</span> <span class="cp">%&gt;</span> # Add the webpacker javascript. <span class="cp">&lt;%=</span> <span class="n">javascript_pack_tag</span> <span class="s1">'application'</span> <span class="cp">%&gt;</span> </code></pre> </div> <h2> Using the component in views </h2> <p>Now let's create a page where the magic happens.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>rails g controller pages index <span class="nt">--no-helper</span> <span class="nt">--no-assets</span> <span class="nt">--no-controller-specs</span> <span class="nt">--no-view-specs</span> </code></pre> </div> <p>This creates a controller called pages with an index action. It skips test structure, assets and helpers.</p> <p>In:<br> <code>config/routes.rb</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight ruby"><code><span class="c1"># Remove</span> <span class="n">get</span> <span class="s1">'pages/index'</span> <span class="c1"># Add</span> <span class="n">root</span> <span class="s1">'pages#index'</span> </code></pre> </div> <p>Call the component in the view using the <code>react-rails</code> helper:<br> <code>app/views/pages/index.html.erb</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight erb"><code><span class="cp">&lt;%=</span> <span class="n">react_component</span> <span class="s1">'hello_world'</span> <span class="cp">%&gt;</span> </code></pre> </div> <p>To start the app:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>rails s </code></pre> </div> <p>In another terminal tab:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>bin/webpack-dev-server </code></pre> </div> <p>Done. Now you can create ReactJS components to help develop your Rails app, without using React as a Single Page Application.</p> <p>I put the example code on Github:<br><br> <a href="https://github.com/guilhermeyo/rails-com-reactjs" rel="noopener noreferrer">https://github.com/guilhermeyo/rails-com-reactjs</a></p> <p>Sources:</p> <ul> <li><a href="https://github.com/rails/webpacker" rel="noopener noreferrer">Official documentation</a></li> <li><a href="https://github.com/reactjs/react-rails" rel="noopener noreferrer">react-rails gem documentation</a></li> </ul> <p><em>Originally posted at <a href="https://guilherme44.com/en/blog/configuring-reactjs-in-rails-with-webpacker/" rel="noopener noreferrer">guilherme44.com</a>.</em></p>