Adding react to your node app – Tyler Swayne – Medium

Adding react to your node app  #react #expressjs #sailsjs #node #javascript #reactjs

  • Instead, I’d like to talk about how to start using it; specifically, in an mvc (or MVC-ish) node app, or really any node application that uses the server to fetch data and render a view with a templating engine.A little while ago, I decided to learn a front-end framework.
  • From what I had read about react at the time, it has the benefit of being potentially light weight, “just the V in MVC”, and after reading more I decided that would be a great solution – add react to my app to get all of the flashy functionality I wanted, learn a front end framework, huzzah!Learning the bones of react was actually a relatively quick and easy experience.
  • I still didn’t quite understand webpack or babel, I didn’t know how to go about passing server-side data to my react component (at least elegantly), and even getting to this point took me a lot longer than I’d like to admit.Soon after all of this I was presented with the opportunity to add react to one of our apps at my real job.
  • I settled on React on Rails (the app was a rails app) and it took me minutes to generate a webpack config, write a small component, add a line of code to my view, and have my react component rendering with server side data.
  • I have used react-helper in a handful of my projects now and it really is a simple solution to adding react to a node app and a big time saver.

React is great, we all agree, so I won’t ramble on about why to use it (I don’t think “we” as developers have ever “all agreed” on anything). Instead, I’d like to talk about how to start using it…

@ReactDOM: Adding react to your node app #react #expressjs #sailsjs #node #javascript #reactjs

React is great, we all agree, so I won’t ramble on about why to use it (I don’t think “we” as developers have ever “all agreed” on anything). Instead, I’d like to talk about how to start using it; specifically, in an mvc (or MVC-ish) node app, or really any node application that uses the server to fetch data and render a view with a templating engine.

A little while ago, I decided to learn a front-end framework. Like, really learn. I had done angular tutorials before, but I didn’t really know angular. Angular was popular enough at the time so I figured that was a good place to start; lots of documentation, easy to learn, not a bad thing to know. Whenever I decide to learn something, I’ll pick or come up with a side project and try to use whatever technology to build it. This time, I ended up getting distracted with the actual project and ditched angular in order to finish it faster. I ended up writing it as a quick monolith using hapi, other technologies irrelevant to this story, and handlebars. Eventually, I needed some UI functionality. From what I had read about react at the time, it has the benefit of being potentially light weight, “just the V in MVC”, and after reading more I decided that would be a great solution – add react to my app to get all of the flashy functionality I wanted, learn a front end framework, huzzah!

Learning the bones of react was actually a relatively quick and easy experience. It is simple enough that at the end of the tutorial in the docs you pretty much get it. So, once I was done I figured “Ok, I’ll just make a react component and throw it in one of my views as a partial somehow, and call it a day right?” There lies the complexity in simple react; actually adding it to your app. Yes, Create React App exists (it didn’t at the time), along with other boiler plate solutions. But those are really useful when creating a new app and I didn’t want to start over. Also, I wasn’t sure how I would manage auth in a completely client app and didn’t want to deal with building an Oauth service, etc. Anyway, before I even started writing code I had to learn all of this, as well as webpack (read: brute force a webpack.conf) and babel.

Basically, my problems in a nutshell were: 1) How do I get my react code to render in my, or as my view? 2) How do I get data from my server to my react component? 3) I wrote everything in jsx, how do I build this bundle everyone says I need? 4) How would I server-side render this component if I wanted to? 5) Where should all of this stuff live? These things aren’t hard to do, but they were hard (and time consuming) to figure out how to do.

I struggled through it all and it sucked. I still didn’t quite understand webpack or babel, I didn’t know how to go about passing server-side data to my react component (at least elegantly), and even getting to this point took me a lot longer than I’d like to admit.

Soon after all of this I was presented with the opportunity to add react to one of our apps at my real job. We needed something flashy and my dev team had been toying with using react already, so I ran with it. I settled on React on Rails (the app was a rails app) and it took me minutes to generate a webpack config, write a small component, add a line of code to my view, and have my react component rendering with server side data. Eventually, I really learned react. I was able to push our react usage from that initial piece of functionality to a brand new single page app with all of the bells and whistles (react router, redux, apollo; all of the hipster react essentials). Later on I realized that a lot of my success with react, especially as a non-front-end developer, came from the ease of use of React on Rails, and the ability to add react to our stack in minutes and continue to scale our usage/include more of the ecosystem when we were ready. That long winded backstory gets to the point of this article .

I was motivated by React on Rails and decided to build a similar solution for node applications — react-helper. React-helper does a handful of really cool/helpful things:

To handle problem 1 & 2 listed in my ranting above, react-helper has a one-liner to “render” your component for you, taking props passed into it and passing them to your component. It returns the “component” that you can pass to your view and display wherever, as you would any other server side data. Your view could only render the component, and there you easily get react “as only the V in MVC”. In the example below, ListUsers is the react component,

The only other step is another one liner to “register” your react component in what will be your webpack entry file.

import ListUsers from ‘./path/to/ListUsers’;

The magic here isn’t terribly complicated. The renderComponent method that you call in the controller just creates an empty div, tags it with the component name you passed it by putting the name in an attribute on the div, and includes all of the data you pass to it as a json blob in another attribute. Then once the html is rendered and passed to the browser, the registry code that gets bundled with your react components in your bundle.js will run, pull all of the divs generated with renderComponent, and actually render the component(s) specified (using ReactDom.render) passing the parsed json blob to the component(s).

Back to adding react to your app — Going through the steps listed above takes about 2 minutes to wire it all together. Not bad. “But where do I put all of this? And there is still webpack to conquer, and I’m not looking forward to that.” For all of this, I built a CLI for react-helper. Now, one terminal command will: 1) pull in all of the required dependencies 2) create a client directory in the location of your choice where all of your react components can go, 3) create a bare bones registry file for you, and 4) generate a webpack config for you. The webpack config may not be production caliber for everyone, but it’s definitely good enough to get you rolling right away.

So, instead of fighting your way through the process of adding react to your app like I did, you can add react-helper to using the cli, generate the webpack config, and immediately focus on writing react! Then when you are ready to render it you just register it, add a line to your controller, add a line to your view, and this time truly huzzah! I also wrote two plugins (one for express (and sails) and one for hapi) to remove a bit of potential duplicate code when using the helper in those frameworks. It can also render your components server-side when you are ready for that.

I hope this didn’t sound like a sales pitch. The barrier to entry to technologies or languages can squash the hopes of anyone wanting to learn or use them, especially in an application that is more than just a pet project. When you don’t have to focus on how to include it into your app, react is very simple to use and easy to sell to the rest of your team. Once you have a component in production here and there, it’s really easy to incrementally add more of the ecosystem to your project. I have used react-helper in a handful of my projects now and it really is a simple solution to adding react to a node app and a big time saver. I hope that it can be that for others as well, or at least inspiration to create other tools that can be.

Adding react to your node app – Tyler Swayne – Medium