React guide article

guide
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)”.

24

I’m either missing something very simple, or else perhaps some info given in this article about the React Router is out of date? When I follow the example code given here, and import and use browserHistory, I get a barf of errors in the console that begins with:

"Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined.
in Router

I am importing as shown in this tutorial (I literally copy/pasted it into my code):
import { Router, Route, browserHistory } from 'react-router';

And I am referencing it when declaring the router, as shown in the example:
<Router history={ browserHistory }>

I also noticed that my editor, Webstorm, flags browserHistory in the import statement like so: “Cannet resolve symbol ‘browserHistory’.”

So did I screw something up? Or is there just a newer way to do this…?