What started out as a short answer to a “what resources did you use for learning React” question on the meteor mentor slack channel, ended up as a post of its own. Now since that I am not a blogger - I really don’t have a blog - I’ll post it here where I think it will be of better use, in the right context:
First of all, I must admit that I’ve been on top of all the news, developments and blog posts since React first ever hit Meteor, so it is fair to say that I have never been a total newbie.
So I guess I should first say that if you ever intend to learn something, begin following the news on that topic. Even quickly skimming through discussions and blog posts will amount to “some level of subconscious understanding” of that topic.
Anyway, about a week ago, I delivered a huge project and had this one-week gap before taking on another fairly large one, with which I’ve already decided to go the React route.
So here’s another word of wisdom, make sure you have a project that you have the opportunity to apply that newly acquired knowledge on. Otherwise everything you’ll think you’ve learned will have vanished into thin air.
I had been “informally” using ES2015 so I also wanted to take this opportunity to formalize my knowledge of that topic as well. And also sprinkle in some npm, babelrc, webpack as well as a pinch of react-css-land.
I must say that everyone has a different learning style. I like having multiple api docs and tutorials open at the same time and jumping around. Since they all touch similar topics, concentrating more on different aspects, it also happens to be a great opportunity to see different takes on doing the same thing.
So, apart from great forum and blog posts, comments, boilerplates, example apps and packages from people like @abhiaiyer, @arunoda, @ffxsam, @gadicc, @joshowens, @sacha, @skinnygeek1010, @timbrandin, @tomredox ; what did I “formally” read and watch? Here’s a list:
- React.js Fundamentals from React.js Program (free)
- React For Everyone from Level Up Tutorials (free)
- Introduction to ES2015 from Mantra by Kadira (free)
- ECMAscript 6 Lessons from EggheadIO (just the free ones)
- This and this blog post to brush up on promises and async/await (free)
- ES6/7 for React from React.js Program ($45)
- Meteor & React For Everyone from Level Up Tutorials ($40)
- Getting Started with Redux from EggheadIO (free)
- Meteor + React from Ken Rogers ($40)
- Meteor Guide v1.3 from Meteor (free)
If you were crushed on time and wanted a very straightforward learning material, without too advanced stuff, but not something too simple, I’d suggest you go with the Level Up Tutorials videos.
Now there are a couple of things you’ll need to decide for yourself, perhaps depending on the project you’re going to implement React with
Which router? Flow Router is easier if you are already used to it. But React Router is the broader standard. Not too hard to switch from one to the other.
Do you need redux? Well, if you have complex UI state and lots of interactions between different components or UI actions affecting multiple components, it may make your life easier in the long run. Otherwise, the good old Tracker is still good and not that old.
Do you need Mantra? Well, if you have a component-heavy app and especially multiple developers working on different parts of the app, while you think you may need to switch out backends or backend integration layers down the road, Mantra is a great “discipline” to follow. Discipline being the operative word. I find myself disciplined enough to come up with and stick to a set of patterns that make most sense for a given project and Mantra makes a lot of sense for those cases I’ve described, but feels like overhead for others.
How do you integrate with Meteor Data? The guide proposes the
createContainermethod which is very similar to react-komposer so you could use either one. React-komposer would make more sense in a Mantra app. Trackerreact and Tracker.Component on the hand feel more like “home” which you can probably use very safely. They have very simple implementations, so go check out their sources to gain a better understanding of how one can integrate Meteor’s reactive sources with plain React.
Forms and data grids? I stil have not found the solutions that best fit my requirements. I need something that can make me feel I no longer want to get back to autoform and tabular. There are lots of alternatives out there and they all have their pros and cons, so I guess you should do your own research on this front.
ReactDom.render(). There are a few packages on Atmosphere that expose those API’s in the form of
<Blaze/>and you can pick any one you like.
Do you need webpack? No! But if you already make heavy use of build tools and bundlers, you may want to “upgrade” to webpack because that seems like the way forward. But you can live without it, not even noticing its absence.
I should also once more remind you that although I have familiarized myself with React concepts over the course of the past 6+ months, I’m only into the first week of my formal learning and I am yet to begin a React project only next week. So some of those opinions are likely to change.
Finally, I am a firm believer of learning by teaching. So if you have a question regarding React in Meteor, given that you are also willing to do do some research and experimentation, just shoot! Even if I don’t have an immediate answer for you, I will do my homework to get an answer and we’ll both have learned something new!