React and Meteor Updated Tuts

react
1

I find react tutorials to be pretty straightforward on their own. I’ve also found Meteor to always be approachable, so I don’t too much have an issue with 1.3 on it’s own.

The problem comes when I try to learn the two together. It feels like the React+Meteor tutorial on Meteor.com assumes you know React. Other tutorials on the topic I find either:

  • Are out of date.
  • Break somewhere in the tut and require me to go find a fix to move forward.
  • Are WAY too dense.
  • Seem not to care to teach but to show it can be done.

There’s lots of ES6 concepts, React concepts, and Meteor 1.3 concepts that overlap. Do you guys know of any well-written, or recorded tutorials on Meteor 1.3 and React? Preferably one’s that you can follow from beginning to end?

2 Likes
2

For videos tutorials I found the tutorials from LevelUpTuts to be great https://www.youtube.com/watch?v=B_HJCmoSvmc. Most of it is free. I bought the extras and they were a little disappointing but was glad to support the author.

3 Likes
3

Honestly, all the Meteor 1.3 tutorials (not just the React one) are much worse than the 1.2 tutorials. I really think they need some attention, as the tutorials are more aligned with the Meteor Guide, rather than an actual “tutorial”.

The old tutorials used to show you the magic right away, and have an app up and running in a very short time with very little typing, and clearly showed you why you should choose Meteor above other platforms.

The new ones don’t really show much magic, don’t really put you in a situation where you are “learning what they are teaching” rather they assume past experience (and even users such as myself with past experience question the methods used in the tutorial), they require much more typing to get the same result in the end, and don’t really emphasize the best parts of Meteor.

The old Meteor tutorials communicated to readers “Meteor is so pleasurable to use, we can teach you how to do all this in minutes, and it has some amazing functionality for the little work you have to do!” I felt like after the short tutorial I was able to do most of the things I needed to do in my business applications.

The new Meteor tutorials communicate “Long-term, this is what your project can look like. Look at what Meteor 1.3 is capable of, and let us highlight these new features that came with 1.3! Look, ES2015! Look, modules! See how much Meteor has changed!”. After the tutorial, you have an idea of what you can do, but it is still a puzzle as to why you would even design your app this way…

This is why I feel it’s far more aligned with the Meteor guide, and not really a “tutorial”. It seems as if they went far out of the way to show the differences of 1.2-1.3 in the tutorial, so it looks like it is catered more for past users of Meteor, rather than designing something that is supposed to be the “new users first Meteor app”. And if that was the inspiration behind it, it doesn’t really do that well imo, because it’s hard to notice how much of it is an improvement over 1.2. It doesn’t really highlight 1.3’s best additions, so it makes me question why they changed the tutorials to this format at all.

I’ve said many times on here, I had employees that joined my project right after 1.3 came out, and the 1.3 tutorial is NOT suitable for new users! It confused them more than it helped.

I had to take the time to teach them myself, considering DiscoverMeteor is for older Meteor versions, and the official tutorials are no longer suitable.

3 Likes
4

I agree COMPLETELY! I feel like there may be something I’m just not getting but pre-1.3 tutorials definitely made me feel like I knew what was going on right after. They were well written, easy to follow and , best of all, immediately added value to a project.

Before I learned Meteor, I was learning Laravel to build a business application. After discovering meteor, I was able to get that app done in about 2 weeks! The time it would have taken me to get a basic understanding of Laravel!

I’m still very much committed to learning/using Meteor but I do wish they’d acknowledge and address things having gotten more difficult. Especially because Meteor’s ease of use was a reason many of us chose it.

1 Like
5

I like the LevelUp Tuts series! I’ve used them for plenty of 1.2 tips and tricks.

However, this tut was one of the ones I used that required me to go back and make fixes because of it’s use of a different version of React and because ReactDOM is a separate thing now.

It also uses (for as far as I’ve gotten at least) 1.3 beta.

Have you finished/Caught up with him in this series? Do you feel like the amount of fixes you had to do to get it working (if any) were few enough to still learn something?

I guess one of my vices here is initially having been “spoiled” by the ease of 1.2 tuts. :slight_smile:

6

Yeah, that’s a fair point. I guess I was lucky in that I went through the tutorial right when those versions of both Meteor and React were the current ones so I didn’t have to do any fixing. Also, it’s a pretty basic tutorial so I hope he does another one of his “Intermediate” ones.

It does seem to be a real challenge for anyone trying to do tutorials to keep up with the pace of change in Meteor and React.

1 Like
7

I agree with this here. I worry that the spirit of Meteor is going to be lost in favor of making Meteor more in-line with typical JavaScript, rather than Meteor paving the way for doing things conveniently in JavaScript. That’s what Meteor is to me - making web development enjoyable and less stressful, while still being extremely powerful.

Regarding Apollo I seen them state something along the lines that they are going to make a pass once the functionality is complete to making it’s ease of use more in line with how things function now.

I do think some things regarding 1.3 should be addressed on this issue. The tutorials need work (as already mentioned) but also I think the whole “imports” system doesn’t really feel like it fits the “Meteor Way”. Especially considering that the backwards compatibility is supposedly only going to be temporary. It’s not that they are “hard”, but they are an inconvenience in development, and the time could be better spent elsewhere. That was one of the great parts of Meteor over other platforms/frameworks. But that advantage is disappearing.

I would hope when modules become standard and imports become required, they have some other systems in place to make the transition feel more like Meteor. For NPM imports make sense, but for the Meteor API & referenced templates it doesn’t really make much sense that the system works like this, except in special case scenarios where the developer needs to adjust load order or optimize a page that uses high amounts of resources. It should not be hard at all for Meteor to create references to files that it is using Templates from and/or Meteor API that is being accessed, and allow users to override as needed.

The main issues regarding this are… it makes prototyping take more time than it did before (which was one of Meteors great strengths), it makes learning for new users a bit more confusing (not that imports are hard, but it is an extra layer of complexity which could overwhelm new users, and in order to keep up with imports they have to spend extra time referencing the API), and it’s not really fair to users of Meteor pre-1.3 who have extremely large projects.

I dread the time when my job is going to have to go through our project and add imports to hundreds (thousands?) of files. Management is not going to be happy that development time will be spent on that! I just hope they are fair and put a system in place to help transition.

1 Like
8

Yes. I’m waiting for something as thorough as DiscoverMeteor. Hopefully it comes in time for me to start my new SaaS project!

9

It would be nice. I have considered trying to write up some tutorials, but I am too busy for at least the next month and a half.

Might I ask, are you having trouble trying to learn any specific subjects in 1.3? The forums here are actually quite helpful!

The major differences you should need for 1.3/React is the different file structure, ES6, modules, and the React-specific changes you can find in the React patch notes page. Is there any one area that you are having the most problems with? (Of course NPM functionality is available now too, but I’m speaking in terms of the ‘changes’ from 1.2, rather than completely new features).

An option I might suggest, is if your problems are React-specific, but if you know Blaze already… check out ViewModel. It allows you to use a component-style structure (and is pretty damn awesome to use, with a nice easy learning curve). But the primary reason I suggest it: Recently he released a React version of ViewModel. This means transitioning from Blaze>React will actually be very easy as you can keep your existing code. The only step in this case would be to combine your HTML/JS in to the singular JS file, rather than having to re-write most of the entire JS files (as you would have to do with Blaze/React alone).

An example to compare the Blaze ViewModel syntax to React ViewModel:

Blaze HTML:

<template name="myTemplate">
    <label>My Variable: </label>
    <input {{b "value: myVariable"}}>
</template>

Blaze JS

Template.myTemplate.viewmodel({
    myVariable: "Hello"
});

React version of the above:

myTemplate({
  myVariable:'Hello',
  render(){
    <label>My Variable: </label>
    <input b= "value: myVariable">
  }
});

As you can see, the syntax is almost exact except for the binding (b=) being inside handlebars, or having the b= as an attribute inside the element itself. But the benefit is, your code will still work! You simply have to combine the html/js in to a component.

Incase you never tried ViewModel - the extra appeal of this method is your variables have 2-way binding (similar to Angular). This means if you use your code to edit myVariable, all elements binded to it (with the ‘b=’) will automatically be updated! No DOM manipulation necessary to retrieve the data from the input, and it is reactive (so it fits in perfectly with ‘Meteors Magic’). It also makes it extremely easy for any click/change/enter press events, validation, etc.

Just a suggestion - Might be a way for you to get started now with your Meteor 1.2 knowledge, and then be able to switch over to React easily in the future! If you choose this route, the only thing you should really learn ‘right now’ about 1.3 is the new file/directory structure.

Good luck =)

1 Like
10

As with any transition, things get a bit more difficult before they get easier, but I think you will be positively surprised with the result. We’re not working on making Meteor harder to use, we’re working on making the rest of JavaScript much easier to use. I think there is so much potential in bringing together the power of the entire JavaScript ecosystem with the usability of Meteor.

2 Likes
11

Nice to get a MDG response, and I am glad to hear!

Yes, I think being able to take advantage of the JS ecosystem is great.

My worries are just that Meteor’s way will be lost in the JS ecosystem. Honestly, 1.3 traded a bit of the Meteor way in order to provide the JS ecosystem, so it causes a bit of worry for users like myself. And I’ll be honest again - the responses around 1.3 release didn’t help that worry much! Only stating that the backwards compatibility is temporary, and the direction of the tutorials changing, kind of fuels the fire!

But I do hope I am positively surprised. As you said your not working on making Meteor harder to use, but as the OP said, Meteor DID get harder to use in 1.3 (partly due to poor tutorials imo). All users like us in this topic hope is that this is recognized, as we hope Meteor retains the usability it had pre-1.3 in time (with these new features added on top).

The responses around 1.3’s release basically seemed to indicate that trade-offs had to be made in order to bring this new functionality, and that’s a bit scary for people who loved Meteor for it’s initial direction of being pleasant to use. So I really do hope that is addressed in the future!

I have no issues with things temporarily being harder - I know how it is in development and your working towards a vision of Meteor in the future - I am just glad it has been communicated to us by MDG that things WILL be returning to Meteor’s roots.

1 Like
12

I created a full length Meteor + React tutorial on Udemy last month. You can check it out here: https://www.udemy.com/meteor-react-tutorial/?couponCode=4launch.

The tutorial is fully up to date with Meteor 1.3, React 15.1.0, and ES6 topics. We cover all the most important aspects of Meteor + React:

  • Authentication - integrating React + Meteors built-in auth system.
  • Securely Handling Data - Meteor has a reputation for not being a secure platform. Learn how to lock down your apps and limit what data any given user can see
  • Infinite Pagination - Load data from now to eternity using Meteor’s built in Subscription and Publication system
  • Sharing Data Between Users - Control which users have access to which data using an authorization system we’ll build from scratch
  • Routing - As always, navigate your users between different pages in your application

Again, its the most up to date course online. Check it out here: https://www.udemy.com/meteor-react-tutorial/?couponCode=4launch

4 Likes
13

This looks very promising! You’ve also got a lot of good reviews. I’ll definitely be checking this one out!

14

Thanks a lot. Definitely something worth looking into!

15

Thanks for the response!

I feel like once I get used to the imports/exports and commit fully to ES6 I should be back to where I left off. But I’m wondering if a “Meteor Lite” with all of the options 1.2 had might be something worth looking into.

I think it’d be nice to have for people like me who are committed continuing with Meteor, but still have apps to get out the door. I know we can still use 1.2 but to have it still be maintained on it’s own might be helpful for some.

16

After checking your course out, I have to say, it was a major catalyst in my understanding of React and Meteor 1.3! Thanks for sharing the link! Truly appreciated.

17

I can recommend Stephen’s Course. Well structured and a good start for people who wanna switsch from Blaze to ReactJs like me. Worth every penny and really up-to-date.

1 Like
18

I’m in section 2 of the course and I wanted to say THANKS to Stephen for providing REASONS as to why you write each line the way you do. Super helpful.

1 Like
19

Yep @Sgrider is the best. I bought his ES6 course as well. And planning to get his React and Redux course once I am done with Meteor and React Course. I should say he has a knack of explaining complex topics.

@Sgrider Any plans of updating your React Native course. I would rather learn it from you than read all the tutorials on the Medium :-). Thanks for publishing.

Ps: Also I think you should put your post above as the main forum posts for more people to see it. My 2 cents :slight_smile:

3 Likes
20

Agreed! We must share @Sgrider 's tutorial with anyone looking to make the transition to React.

3 Likes