Meteor 1.5 is out and we can finally do code splitting!  If you are not familiar with code splitting, this allows us to separate our logic in a single page web app (SPA) and only send the client the relevant portions of code. This is useful in a couple immediate ways:

1. You have a giant application that is too large to send at once (any script files over 1MB often take too long and the user experience is terrible)
2. You want to keep some portions of code hidden until the user is authorized to see it

We are going to cover option 2 since that is a use case I just ran into. Sometimes splitting the code up can make the files larger (or the same size) so Meteor has provided a nice tool that helps visual how large the file sizes are once they are bundled. You can read more about that in this great post: Bundle Visualizer. Use the tool before the split, and after the split to make sure it doesn’t effect your code in the wrong way (compare the two).

The current way to connect Meteor into your React App is to use ES6 based components. Meteor has a function called “createContainer” that will send Meteor data into your React component as props instead of “this.data” access. This can make it a bit more complicated if you need to change your subscriptions based on React’s state, but we will talk about the new pattern you will need to use. This is a better pattern long term as you can switch out the top level data injection and re-use all your display logic (say you want to swap out Meteor down the road, or use Redux).

For the past few weeks I have been refactoring a client’s app to move from the React.CreateClass() format to the new and shiny ES6 class based format. We also re-factored Meteor from a mixin to the new createContainer component format. While we are at it, let’s demonstrate the functional based components for a child that only uses props (so not state). Functional components make the code much cleaner as you don’t need constructors for just display logic.

If you are creating things with ReactJS, it’s sometimes nice to use it in WordPress. I will describe how to use it in a page, but this should also work for just a post.

You can do this pretty easily with a couple plugins:

“Scripts N Styles” - this plugin will allow you to add JavaScript to your Page.

“Per Page Add to Head” - this will allow you to add the necessary JavaScript libraries to the head portion of the WordPress page. This is how React is actually loaded.

I have been chasing down an odd issue with a Meteor/React app I am building. The error showing up in the browser console is:

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.