Request for feedback about new official React tutorial


#1

You may have noticed that meteor.com now has an Angular beginner tutorial to go alongside the Blaze one. The next natural step is to have one for React!

I have just finished writing a first version, and I would love some feedback on the content. Please post a comment here or a pull request to the repo!

Live website

Use the buttons to go to different steps, and use the tabs to switch view layers.
http://tutorial-viewer.meteor.com/tutorial/0/react

Source content

Submit a pull request with edits if you like!
https://github.com/meteor/tutorials/tree/master/steps/react

Run it locally

Run the tutorial viewer app by downloading from the repo:

The content is in a git submodule in /packages/tutorials.


Preview of official React support
#2

Phenomenal stuff! :rocket:

One thing that I would like though is if it included layouts and url routing as well. I don’t know how to handle urls when using React in a Meteor app. How do I have multiple layouts?

I’m sure this tutorial will be the best way to learn React on the web pretty soon, congratulations!


#3

Wow It’s very surprising. Thank you for the announcement :blush:
Are you planning to support React Native as well when it is ready for supporting android ?

I think that Meteor + official React&React Native will change a lot of things as not only for fast webapp/mobile development but also for easier scale-out and maintainable applications.


#4

Interesting tutorial, probably the inner React component Task should comminicate to the parent App/TaskList to persist the data and not call Tasks.insert(..) directly.


#5

I think this is a reasonable way to go, there are just a couple considerations:

  1. People need to learn about binding functions for this; is it really worth it?
  2. Is the app actually more maintainable with this? What are the chances that you would want the Task component to operate on a collection that isn’t Tasks?
  3. There is more code to explain, since we need to pass the callbacks in from App, although this might not be a big issue

What are the tradeoffs here?


#6

What you say is correct. Personally i think people should start to think about MeteorReact components and pure React components separation since the beginning.
Some advantages I think:

  • one or less components dependent on db api, minimongo miniredis
  • Easier component testing in isolation?
  • More affinity and interoperability with the react components that already exist

#7

I see - what you’re saying is that it’s valuable to have components that can work in isolation of Meteor, and that you should minimize the number of components in your app that contain data loading/manipulating logic. That makes sense to me. I’ll see what it takes to refactor that part.


#8

I think that overall the tutorial looks good so far. I know that I am probably sounding like a broken record at this point, but I really feel that these tutorials should include how to best handle routing. Now I don’t know if MDG wants to officially endorse something like FlowRouter for the time being, but in my mind routing should be one of the first things covered when learning a new web framework. Not knowing how to handle routing “the right way” when coming into a new framework can be a major road block for a lot of people.


#9

I get as far as step 2, “Replace the starter code”, but get the error:

simple-todos-react.js:5:11: Unexpected token (

when I run meteor. I thnk it relates to getTasks() {, but no idea why that’s a problem being a noob…


#10

You need to rename the file to simple-todos-react.jsx, I’m improving stuff to make that more clear.


#11

Got it, thanks, and obvious now you point it out. That’s what I get for taking shortcuts. :smile:


#12

@sashko This was a great tutorial and I got to know React a bit better from it! Sorry I don’t have better feedback, but this means that it’s nearly perfect (at least for me).


#13

Step 5 - while I know this is more a meteor tutorial than a React one, it might be worth covering how this.props.task._id gets assigned (data-reactid).


#14

Step 6 - wow, that was easy! :smile:

Step 7 - it’s not clear from the text what meteor install-sdk ios and meteor add-platform ios do.

From the command names I’d guess install-sdk downloads and installs on this system, and I only need to do that once, and that add-platform adds it to this particular project?

Oh, and - wow that was easy too! :smile:


#15

Finally (and guessing you know this) steps 2-5 reference App.jsx and Task.jsx in the links to github, whereas the tutorial is all about simple-todos-react.jsx.

All in all, a great getting started tutorial! Something on routing would be good, but I guess that’s elsewhere - I found this at least: http://alexgaribay.com/2015/07/06/getting-started-with-meteor-react-and-react-router/


#16

Just fixed thing with the file name references, thanks for the heads up!


#17

So I talked to a couple people, and it looks like Routing might make it into the tutorial soon. Probably not in this version, but hopefully in the near future. I agree that it’s a basic concern for a wide range of apps.


#18

That’s exciting! Just out of couriosity - what will the recommended router package be?


#19

Not sure yet; investigating this will probably be a big chunk of the work to make it happen.


#20

Okay so I’m not a Meteor beginner, but went through the tutorial to learn about React. It’s pretty good.

What is missing and is very React specific is how to build an update form. See this topic to understand my confusion: Update form in React.js