CODEWITHSUNDEEP
javascriptruby-on-railsrubyreactjs
Mel
Mel

Reputation: 2687

Rails 5 - getting started with React.js

I'm trying to learn how to use react.js in my Rails 5 app.

I have installed react-rails gem.

I have used the generator to create my first component as follows:

rails generate react:component AppRole title:string display_name:string category:integer --es6

That gave me a file in app/javascripts/components called app_role.es6.jsx which has:

class AppRole extends React.Component {
  render () {
    return (
      <div>
        <div>Title: {this.props.title}</div>
        <div>Display Name: {this.props.displayName}</div>
        <div>Category: {this.props.category}</div>
      </div>
    );
  }
}

AppRole.propTypes = {
  title: React.PropTypes.string,
  displayName: React.PropTypes.string,
  category: React.PropTypes.node
};

I watched this egghead.io getting started video (as well as having purchased Arkency's react with rails book and read this tutorial .

I didn't use the air pair tutorial because I'm trying to learn es6. I got stuck using the Arkency books because there are no complete examples and I got lost in the gaps where the book assumes knowledge.

However, even the getting started video from Egghead isn't working for me. I follow their structure, and try to render the index page, which has:

<p><%= react_component('App_Role', title: 'hello') %></p>

A blank white page renders. When I inspect it, I can see:

<div data-react-class="App_Role" data-react-props="{&quot;title&quot;:&quot;hello&quot;}"></div>

When I use the chrome add-on for react, I can see the react that olark messaging plugin uses but nothing else. The egghead tutorial at least renders the 'hello' text.

When I use the chrome inspector to look at the console tab, I get an error that says app role is not defined:

VM4231:1 Uncaught ReferenceError: App_Role is not defined(anonymous function) @ VM4231:1getConstructor @ react_ujs_mount.self-5293119….js?body=1:58mountComponents @ react_ujs_mount.self-5293119….js?body=1:77(anonymous function) @ react_ujs_turbolinks.self-19cb50a….js?body=1:5dispatch @ jquery.self-bd7ddd3….js?body=1:5227elemData.handle @ jquery.self-bd7ddd3….js?body=1:4879t.dispatch @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.pageLoaded @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6

Can anyone see what I've done wrong?

Upvotes: 2

Views: 378

Answers (1)

Mel
Mel

Reputation: 2687

I got this working when I realised it's supposed to be AppRole rather than App_Role in the view window.

Upvotes: 1

Related Questions