Meteor 1.5 ❤ React Loadable

Spoiler: it just works

If you keep up with the latest JavaScript news, you might have seen this article by james kyle about his React Loadable project, which establishes a new pattern for using dynamic import(...) to fetch React components and display loading indicators while they load.

I especially love this graphic illustrating the difference between a)using dynamic import(...) at the routing level and b) using it at the component level:

Testing react-loadable with Meteor 1.5

I was naturally curious if react-loadable would work in Meteor 1.5-beta.10, since Meteor should be able to take full advantage of these finer-grained module groupings. So, this morning I started with the react-loadable-example repository and attempted to turn it into a typical Meteor app.

I’m happy to say that the conversion was a success, as you can see from the changes that I made. These changes were pretty predictable:

1. Borrowing the .meteor directory from a fresh Meteor 1.5 app: meteor/react-loadable-example@2ea8ad5
2. Reorganizing the example code to have a typical Meteor application structure (client and imports directories, static-html-style HTML, etc.): meteor/react-loadable-example@707028d
3. Getting rid of unnecessary Babel/Webpack dependencies and configuration files (my favorite commit): meteor/react-loadable-example@1d5a12d

Now, these changes were only necessary because I was starting from an existing Webpack/Babel-based app. If you already have a Meteor app, or you’re starting one from scratch, you would just meteor npm install --save react-loadable, and start writing code using the Loadable component, in which case none of these changes would be necessary.

The react-loadable-example app uses yarn instead of npm, which works perfectly well with Meteor, though we recommend using meteor yarn to guarantee the correct version of Node. If you're not already using meteor yarn, just meteor npm install --global yarn to make it work.

Try it out yourself!

If you want to try out the example app yourself, just follow these steps from the README.md file:

git clone git@github.com:meteor/react-loadable-example.git
cd react-loadable-example
meteor npm install --global yarn # if necessary
meteor yarn
meteor run

Open up localhost:3000 in your browser, and behold the “Loaded!” text. If you watch very carefully, you’ll see “Loading…” appear briefly before “Loaded!” replaces it. The delay is pretty short, but it’s also artificial. You wouldn’t be able to see the “Loading…” indicator at all, if this 400ms delay was not included for demonstration purposes.

As excited as I am that react-loadable works in Meteor 1.5, your experience may differ from mine, so I encourage everyone to play with this example app, or try out react-loadable in your own React-based apps. If you're confused by anything along the way, your feedback (on GitHub) will directly improve Meteor 1.5.

Meteor 1.5 ❤ React Loadable was originally published in Meteor Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.