Rails 5.2 + ReactJS: simple rendering issue

Question

I am using Fernando Villalobos' Rails + ReactJS tutorial and have run into a (hopefully) simple rendering issue.

I'm using Rails 5.2.1 and the react-rails gem v2.4.7.

Here is the controller logic:

def index
  @records = Record.all
end

Here is the view:

<%= react_component "Records", { data: @records } %>

Here is the CoffeeScript:

  @Records = React.createClass
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'

At this point in the tutorial, the user should see the div, the H2 tag and "Records".

Google Developer's Console confirms React has inserted a <div data-react-class="Records" data-react-props="..."></div> into the HTML - but I don't see any sign of the <h2>Records</h2>. There are no reported errors or warnings. I've tried using equivalent JSX syntax with no change in results. The javascripts/application.js file looks correct too:

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .

What am I missing?

That tutorial was written 3 years ago using react-rails v1 current version is 2.4.7 maybe try to find a newer tutorial? — engineersmnky
– engineersmnky, Commented Aug 27, 2018 at 20:39
Here are a few medium.com/quick-code/… , pluralsight.com/guides/… or Free Complete Course — engineersmnky
– engineersmnky, Commented Aug 27, 2018 at 20:45
Thanks. I started a 2nd lesson from Learnetto (late 2017) and ran into the same issue. — Brian Piercy
– Brian Piercy, Commented Aug 28, 2018 at 1:02

arminfro · Accepted Answer · 2018-08-28 05:03:40Z

Because you have <div data-react-class="Records" data-react-props="..."></div> rendered but not processed you properly miss either the webpacker setup (in case you don't go with sprockets) or just the 'JavaScript pack tag'.

Have you followed the instructions from the 'Get started' section of the react-rails gem? See here

Instructions in short:

Add Gems

Add webpacker and react-rails to your gemfile

Run installers

$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

Link the JavaScript pack

add <%= javascript_pack_tag 'application' %> to your view

Generate component

this step may be optional (since you have already written your component)

rails g react:component my_subdirectory/HelloWorld greeting:string

Render it

<%= react_component("HelloWorld", { greeting: "Hello" }) %>

or in your case, as you did <%= react_component "Records", { data: @records } %>

In case it's not working

Try Server side rendering, <%= react_component("Records", { data: @records }, {prerender: true}) %>

Start webpack-dev-server to see what it has to complain about: bin/webpack-dev-server

Collectives™ on Stack Overflow

Rails 5.2 + ReactJS: simple rendering issue

1 Answer 1

Add Gems

Run installers

Link the JavaScript pack

Generate component

Render it

In case it's not working

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Add Gems

Run installers

Link the JavaScript pack

Generate component

Render it

In case it's not working

Comments

Your Answer

Sign up or log in

Post as a guest

Related