React guide article

guide
4

Yes, in the exact same way the example code in the guide uses it.

5

I think the Using Blaze with React section should be renamed to Using React Components in Blaze and that we should have a corresponding Using Blaze Templates in React. Or something along those lines.

My preferred (and biased) way of doing this is with my gadicc:blaze-react-component, which looks like this:

import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';

const App = () => (
  <div>
    <Blaze template="itemsList" items={items} />
  </div>
);

Alternatives include:

Both are for Meteor 1.2 and have hard dependencies on meteor-react. The former involves first converting the template in JS, and then using the newly created Component directly, whereas I preferred to have a single step and be clear that Iā€™m using a Blaze component. I did however offer the same ability in case package authors wanted to use it. For the component syntax, I tried to keep it short and similar to react-template-helper.

Iā€™m happy to do a PR for this if thereā€™s a consensus around the approach, and/or open a separate topic for further discussion. Iā€™m also happy to ā€˜donateā€™ the code to the Meteor namespace; Iā€™m not too interested in maintaining another package, just felt it import to have something that works well straight away with 1.3.

6

As a newcomer to React it is really hard to choose between Flow Router and React Router. Maybe a little more opinion would help.

3 Likes
7

I think JSX compiles to stuff that uses React, so you might need to import React even if the file doesnā€™t contain the words React anywhere.

1 Like
8

I think it could be worth opening a new discussion to decide which package for this is the best to recommend! I agree that having this section would be awesome!

9

Here we go :slight_smile: Best way to import Blaze templates into React

2 Likes
10

Yes, it is required that React be defined if you use JSX. Thereā€™s an eslint rule that picks this up (see the code style guide article for how to use eslint if you are interested): https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md

11

Fair enough! We probably squibbed on this one @sashko. Perhaps we should do a poll of what people use?

3 Likes
12

Thanks for this @gadicc

2 Likes
13

I would love to see a howto on Redux and Meteor. Specifically:

  • How to import reactive data into Redux state and keep it up-to-date

  • How to differentiate between local and non-local changes

  • How to subscribe/unsubscribe based on the application state

Essentially, Iā€™d like to see how we can use Redux as the single source of truth for our apps, while still benefitting from Meteorā€™s Mongo proxy and reactivity.

1 Like
14

Iā€™m new to meteor and created a first ā€œtestā€ application in version 1.2.1 and react.

I had a lot of fun with it because meteor supplied me almost everything I need to jump in very quick and also with great tutorials.

Now with Meteor 1.3, I got the feeling that everything is so overloaded and complicated.
What type of router should I use? What is the best way to receive my mongo data-collections? In addition (just my issue) is, that I have to learn how ECMA 2015 works with modules.

For so many breaking changes, it would be nice to have either a well structured turorial or even better a video turorial.

Donā€™t understand me wrong: You probably made a great job, but for beginners there want to work with meteor are to many changes and to many packages out. Maybe this is a general problem in JavaScript tooā€¦

Best regards

4 Likes
15

Have you tried doing the React tutorial again? It has been updated with all-new recommendations for some of this stuff.

1 Like
16

Abhi Aiyer has this:

2 Likes
17

The guide calls containers from the router. Instead is it OK to nest containers inside other react components? Can containers have defaultProps?

18

Yes! definitely.

Not that I know of. Perhaps you could just use _.default or something inside the data function?

19

It would be cool if the guide had more examples of containers. Itā€™s taking a lot of experimenting to figure out what I can and cannot do in terms of props, propTypes, defaultProps, contextTypes, getChildContext, state, initial state etc. Especially when you have deeply nested components.

3 Likes
20

I also agree with @rdagger to have more explanation on what createContainer can do. Maybe a more extensible guide on manage mutating variables when using React and Meteor. Because now itā€™s confusing whether you will use Reactā€™s this.state or Meteorā€™s ReactiveVar and ReactiveDict.

3 Likes
21

Totally. Add redux to the equation with its built in connect() container and itā€™s even more confusing. Do I wrap the meteor data container with another container so I can connect to the redux store at the parent level, or do I wrap the connect component with the meteor data component? Iā€™m trying to keep presentation containers separate from logic and it seems like I need multiple wrapper containers but Iā€™m not sure what the right way to do it is.

2 Likes
22

Completely agree. Definitely need better documentation/examples surrounding createContainer.

2 Likes
23

The example code for using createContainer:
export default FooContainer = createContainer(() => {

ā€¦ doesnā€™t pass the recommended Airbnb eslint style guide. I get ā€œFooContainer is not defined. (no-undef)ā€.