Webpacker React component example

Author: eizengan

app/javascript/components/hello_component.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+export default class Hello extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      displayedNames: [this.randomName()]
+    }
+
+    this.tryNewName = this.tryNewName.bind(this);
+  }
+
+  tryNewName() {
+    this.setState(
+      state => ({
+        displayedNames: [
+          ...state.displayedNames,
+          this.randomName()
+        ]
+      })
+    )
+  }
+
+  randomName() {
+    const index = Math.floor(Math.random() * this.props.names.length)
+    return this.props.names[index]
+  }
+
+  renderNameListElements() {
+    const displayedNames = this.state.displayedNames
+    return displayedNames.map(
+      (name, index) => <li key={index}>...{name}...?</li>
+    )
+  }
+
+  render() {
+    return (
+      <div className="hello-component">
+        <h3 className="header">Hello...</h3>
+        <div className="list-container">
+          <ul>
+            {this.renderNameListElements()}
+          </ul>
+        </div>
+        <button onClick={this.tryNewName}>
+          Nope
+        </button>
+      </div>
+    );
+
+  }
+}

app/javascript/components/hello_component.scss

@@ -0,0 +1,19 @@
+.hello-component {
+  border: 1px solid #666;
+  display: inline flow-root;
+  min-width: 20em;
+  padding: 1em;
+
+  .header {
+    margin: 0;
+  }
+
+  ul {
+    display: inline flow-root;
+    text-align: left;
+
+    li:not(:last-of-type) {
+      text-decoration: line-through;
+    }
+  }
+}

app/javascript/packs/application.scss

@@ -1,3 +1,4 @@
 @import "stylesheets/normalize"; // TRICKY: relative to path added in additional_paths
 @import "../stylesheets/global";
 @import "../stylesheets/flair";
+@import "../stylesheets/components.scss";

app/javascript/packs/hello_react.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Hello from '../components/hello_component'
+
+document.addEventListener('turbolinks:load', () => {
+  const container = document.getElementById('hello-component-container')
+  ReactDOM.render(<Hello names={['Aaron','AJ','Mark','Mitch','Nate']} />, container)
+})

app/javascript/packs/react.jsx

@@ -0,0 +1 @@
+@import "../components/hello_component"

app/javascript/stylesheets/components.scss

@@ -75,4 +75,21 @@
     <button id="add-avatar-button" type="button">I MUST HAVE MORE</button>
     <div id="so-many-avatars"></div>
   </section>
+
+
+  <section>
+    <h2>On integrating with React:</h2>
+    <p>
+      When I applied for a job at Mutually Human I did my project using React.
+      I tried not to let on that this was actually a <em>huge</em> gamble for
+      me; I had started playing with React only a month prior, so I wasn't very
+      familiar with it yet. It was flexible and fun to play with, though, and
+      I figured even if I didn't get the job I'd come away having expanded my
+      knowledge in a new framework. I've barely used React since, but I still
+      find its architecture quite elegant
+    </p>
+    <p>
+      Here is a React component which will greet you by name (eventually)
+    </p>
+    <div id="hello-component-container"></div>
 </article>

app/views/application/show.html.erb

@@ -6,7 +6,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'react', 'data-turbolinks-track': 'reload' %>
     <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>