meteor/guide

React article improvements

Closed this issue · 6 comments

lorensr commented

https://guide.meteor.com/react.html

TODO

  • example static-html <body>
  • .jsx -> .js
  • explain ListContainer name
  • shouldComponentUpdate example
  • "Migrating from Blaze" section

id="app"

You need to include a <div id="app"></div> in your body’s HTML somewhere of course.

Could we remove "of course" and add an example of a <body> with just that div, using static-html?

jsx

import ListPage from '../pages/ListPage.jsx';

is the ListPage snippet before this a .jsx file? The label in the top-right just says "JS".

JSX is introduced above this only as:

Most React code is written in JSX,

I assumed it was just talking about this part:

return (
      <h1>Hello World</h1>
    );

not the whole file. Perhaps that could be noted, along with changing the top-right snippet label to JSX and beginning the snippet with // filename.jsx

ListContainer

I don't see how this component gets it's name? From the filename? Or is ListPage at end incorrect?

Then we create a ListContainer container component which wraps it and provides a data source:

import { Meteor } from 'meteor/meteor';
import { Lists } from '../../api/lists/lists.js';
import { createContainer } from 'meteor/react-meteor-data';
import ListPage from '../pages/ListPage.jsx';

export default createContainer(({ params }) => {
  const { id } = params;
  const todosHandle = Meteor.subscribe('todos.inList', id);
  const loading = !todosHandle.ready();
  const list = Lists.findOne(id);
  const listExists = !loading && !!list;
  return {
    loading,
    list,
    listExists,
    todos: listExists ? list.todos().fetch() : [],
  };
}, ListPage);

Preventing re-renders

https://guide.meteor.com/react.html#preventing-rerenders

Can't envision this – an example use of shouldComponentUpdate would be a great help

events

There's an example of an event when using react inside blaze, but what about just normal react events – how are they defined and where should they go?

tmeasday commented

Could we remove "of course" and add an example of a with just that div, using static-html?

Sounds like a good idea.

is the ListPage snippet before this a .jsx file? The label in the top-right just says "JS".

This was an error, fixed: 834728e

I don't see how this component gets it's name? From the filename? Or is ListPage at end incorrect?

When you export default, the import can be called whatever the user wants (it's the same when you export non-default too but a little trickier). It's up to the user to call it something sensible. Typically you'd just mirror the filename:

import ListContainer from 'ListContainer.jsx';

So in that sense it comes from the filename. The ListPage at the end is the input to the createContainer function.

Can't envision this – an example use of shouldComponentUpdate would be a great help

In the simplest case you use this when props and state are exactly the same as in the last render. It's not necessarily obvious but the way Minimongo/Tracker works for instance it's quite possible for containers to re-render when the output of createContainer has not actually changed (for instance if you are selecting the first N items in a list and the N+1th changes).

There's an example of an event when using react inside blaze, but what about just normal react events – how are they defined and where should they go?

https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

I'm not sure we are trying to write a pure React guide here.

lorensr commented

I'm not sure we are trying to write a pure React guide here.

Perhaps not a pure guide, but how about a "these are the equivalents when translating from blaze" guide, similar to http://www.angular-meteor.com/migration/angular1/intro?

The closest to this currently is the "Using Meteor’s data system" section, which has the createContainer with sort of helper-equivalents, but it would be nice to know:

  • how to have the helpers (attributes of object returned from createContainer) rerun individually, as Blaze helpers do
  • the equivalent of blaze events
  • equivalent of data context, and accessing that from events and helpers
  • equivalent of template instance, and accessing that from events and helpers
tmeasday commented

is the ListPage snippet before this a .jsx file? The label in the top-right just says "JS".
This was an error, fixed: 834728e

Actually the JSX was not rendering for some reason I couldn't figure out. @stubailo suggested we just used JS for React files anyway, so we'll just do that. Someone should convert the React todos to use .js files at some point :/

tmeasday commented

Perhaps not a pure guide, but how about a "these are the equivalents when translating from blaze" guide

Yeah, I think it'd make sense to have a "Migrating from Blaze" section.

ffxsam commented

I may tackle some of this when I have some spare time. I'd like to maybe take a stab at the section on containers, and work some React best practices into that section.

  • 👍1
filipenevola commented

I'm closing this issue because it's too old.

We are going to make many updates to the guide in the next weeks and it's better to focus on issues with recent activity. If you think this issue is still relevant please open a new one.