Rails Webpacker

So, I recently had an amazing conversation with another developer. I mentioned some issues I had with managing authentication/authorization with a rails/react app that uses rails for the backend as an api and react for the front end. She mentioned that there's rails webpacker and that it manages both for you. So, I decided to check it out.

I found this site first - which allows you to setup a rails app with webpack and you can specify react. Neat! I tested it out by creating an application folder in the view, a home file, a home method in the application controller and a home route that directs to the root. Then I had to add the test react component in the javascript => packs => hello_react.js. I had to add it with erb tags to the layouts => application.html file. There are instructions inside the hello_react.js file to help you out.

So, I'm looking at this and I'm confused. I can see that I can render a component, but where can I pull in data? In my rails/react app, I made a call to an api, which I'm not doing here. Back to google I went and discovered there's another gem that will help with this.

https://github.com/renchap/webpacker-react

Enter webpacker-react. You can render react components from either a controller or a view!. This is perfect. Something I can work with! Getting it setup took a little effort and I was thankful to find an example to show me what I might be doing wrong.

I added this line in my controller:

render react_component: 'Hello', props: { name: 'Jen' }

Added this line to the layout file application.html.erb: 

<%= javascript_pack_tag 'hello_react' %>

The last part is "registering" your component in the javascript => packs folder. In the hello_react.js file I added: 

import Hello from 'components/hello';

import WebpackerReact from 'webpacker-react';

WebpackerReact.setup({Hello});

This is pretty neat. Something to note. I created my rails app with webpacker=react. You can also add the gem once you create a rails app with webpacker. I found the first option to be easier, in that, I knew it was done correctly instead of trying to add it after. It's good to know you can do it either way incase you want to add to an existing application. 

I can't wait to build a full application with this and see what else I can do with it. 

On that note, I'm off to write some more code.