Best Practices React

So I’m finally at a point where my projects have winded down, and I finally have time to learn react. I love with @sashko has done with guide.meteor.com. Is there anything similar for React? I’ve gone through the official tutorial on meteor.com, and I’m in the process of going through getting started with react by MeteorChef. Is guide.meteor.com ever going to be updated for React? What’s similar that exists right now?

4 Likes

Couldn’t agree more.

There are so many different ways to integrate React (npm, MeteorDataMixin, TrackerReact, MeteorFlux pckgs, etc… ) that deciding on the right approach can quickly become daunting.

I understand @sashko’s decision to focus on Blaze for the UI section - I just hope that similar materials will be created for React as well.

1 Like

We’ve some related materials in the FlowRouter guide.
See: https://kadira.io/academy/meteor-routing-guide/content/rendering-react-components

Most of them are not related to FlowRouter but general terms like subscription management and so on. I suggest you to give it a try.

2 Likes

The main issue with React being more difficult is that React is only a thin view layer. React itself doesn’t tell you how to architect your app. Unfortunately I haven’t seen very many architecture articles for Meteor in general.

Currently using the Meteor mixin allows you to bypass all of the flux/redux wiring and that approach works great for small/med apps. If you have a large/complex app, Redux will actually make life easier. However, if you use flux/Redux in a small app, it can make if more difficult (more so with the learning curve).

I’ve open sourced a small app that uses an architecture pulled from a few battle tested prod apps. It separates user action logic from the view (for easy testing), and separates domain logic/mutations (into something I called ‘domains’). Component updates are handled by the Meteor mixin. This takes you very far without using flux and can be used with Blaze or React.

The readme also goes into a lot of detail and is almost a blog post lol. It might be outdated a bit but the main difference is that we currently have the option to drop Blaze (as of 1.2).


###https://github.com/AdamBrodzinski/react-ive-meteor


![screenshot](https://camo.githubusercontent.com/f35e935b60a115a298c1d0ad2a2476625b0df811/687474703a2f2f6661742e6766796361742e636f6d2f57696e647953656e74696d656e74616c48657263756c6573626565746c652e676966)
5 Likes

@SkinnyGeek1010 This is kind of an odd question but between these 4 React boilerplate apps you wrote -

  1. https://github.com/AdamBrodzinski/meteor-react-boilerplate,
  2. https://github.com/AdamBrodzinski/meteor-redux-example,
  3. https://github.com/AdamBrodzinski/meteor-flux-leaderboard/tree/redux
  4. https://github.com/AdamBrodzinski/react-ive-meteor
  • which did you enjoy developing with the most? Also, which do you think is the most capable for developing large apps with?

And by the way, thank you for giving so much to the community - I’ve learned a hell of a lot from your detailed answers and discussions in this forum. Keep doing you!

5 Likes

Ah thanks! Nice to hear… sometimes I wonder if I should bother :laughing:

which did you enjoy developing with the most?

I would have to say the leaderboard with Redux. Using that drastically shifts the logic that typically is trapped in event listeners and makes more of the app unit-testable. The reactive-meteor is a close second. This was my first react app so that was a blast.

Also, which do you think is the most capable for developing large apps with?

Hands down Redux. ‘Functional’ apps are easier to reason about (ugh I hate that term though) and it has lots of good tooling for debugging and maintaining an app. For large/complex apps this is more important that ‘starting quickly’. Large apps also usually have a team and having a ‘standard’ to pass data around the app in the same way is a general win.

At the very least the actions/domains pattern in reactive-meteor is a must. You can put side effects like emailing a user, gathering profile data, or triggering analytics there and the ‘domain’ would ‘create a post’ for example.

Note that you don’t have to use Redux for DB data, as minimongo and the Meteor mixin will work. However, at the least, app state that is not saved to the DB works really really well in Redux.

6 Likes

Please, please, please keep bothering! Your comments are pure gold @SkinnyGeek1010 - I still can’t thank you enough for this one: Worst time to start a new app?. Thanks again for taking the time to post!

1 Like

@SkinnyGeek1010 I must admit the Redux paradigm has always made the most sense to me. My current project doesnt have the complexity to warrant it at the moment, but I am pumped to try it.

1 Like

Nice! :thumbsup: I think as long as you’re down to try it, any size app will do. If it’s really small you can get away with a single ‘app reducer’ and ‘AppActions’ modules.

1 Like

Only if you enjoy doing it :slight_smile:
Having said that, your almost religious fevor in the forums re react/redux was what pushed me to try it out a couple of months ago. React is yeah ok but 10 mins into Dan’s tutorial for redux made me feel like I was a kid in a candy store. Now, I’m at work telling everyone about the awesomeness of it all.

I’m only doing a small app and even though react+redux is a steeper learning curve than just react or blaze, I find that it is easier to put ‘code’ where it belongs so I worry less about who’s responsible for what and just get on with creating components, actions, reducers and they all just do what they’re meant to in the greater flow of things.

Thanks for sharing your boilerplates, comes at a good time for me as I’m trying to work out how to integrate with meteor backend.

3 Likes

I’ll also take a moment to say thanks!

Your posts here have been highly influential and helpful in my journey towards React and Redux. In fact, if not for your early posts on Redux, I likely would have just continued doing things the old Meteor way and been blindsided by the seismic changes occurring in the community. Instead, when the Blaze/React forum thread came, MDG’s conclusions seemed obvious.

1 Like

Adam, your contributions to the Forums are invaluable. I’ve learned a lot from your comments - please keep going!

Many thanks,

Telman

4 Likes

“Anything similar?”. Right or wrong choice, I am going the vue.js way. Any comment helping compare React and vue.js welcome.

2 Likes