Meteor + React + Mantra tutorial/walkthrough


#1

I created a tutorial/walkthrough for anyone who is interested in exploring Meteor 1.3, React, and the new Mantra architecture.

It’s friendly for newbies (if they have some JS programming experience.)

Compose your Awesome New Web App


I was working on this at the same time @arunoda published a similar article. But it has a different focus.


:vertical_traffic_light: TRANSMISSION #5 (legacy #3.0): broadcasting the latest from Meteor Forums
:vertical_traffic_light: TRANSMISSION #5 (legacy #3.0): broadcasting the latest from Meteor Forums
#2

If I may suggest, could you please create another tutorial on how to add user account functionality to this? Sign In / Sign Up / Edit Account etc. I think that would be extremely useful for someone like me who is trying to learn Meteor now during the community’s transition to 1.3 and React. It’s hard to find learning material on all this new stuff.

Thank you!


#3

This is great. Yeah! My previous one is a simple React example.

This could be title as the “Missing Getting Started Guide for Mantra” as well.
Thanks.


#4

If you are familiar with Blaze this article should help you much. At least it helped me to catch up basics with Meteor React and some more about Sign In / Sign Up and etc… in Meteor React.

Thanks.


#5

Good idea, I would like to do this, maybe create accounts module for Mantra… if I had more time this week. I’m not sure when I would get to it.


#6

That would be awesome, whenever you have time.

Also, at the end of Part 1, it shows a screenshot of what the home page should look like (with a list of posts), however, the tutorial up to that point never had a step that involved inserting data into the collection.

Edit: I see it’s from a configuration file now.


#7

Someone should rewrite the Meteor guide from Mantra perspective. I say ‘someone’ because that would be asking a lot of work… :smiley:


#8

Okay. It’s not something like Meteor Guide. But we started Mantra Tutor.
See: https://tutor.mantrajs.com

Mantra related content will appear soon.


#9

I had a quick look through this. Everything is clear to me. But now I’m looking at this:

…and I’m wondering, what if I’m storing my subscription params in redux? I need my subscription to run reactively using both redux AND tracker at the same time. I need it to run so that I know when the subscription is ready, and I need it to run also when redux state is updated. Is this possible?

Thanks for the guide though, it made going through mantra much quicker than without.

Also @arunoda the link you provided is still pointing at your ES2015 content. Not sure if that’s intentional :wink:


#10

Blew through that already! It was very helpful!!!


#11

In Mantra, data flow is unidirectional. This is how you can do this.

First you need to create a container which gets data from a redux store and pass value as props.

Then create another container to that using Meteor data.

In react-komposer there is an utility called composeAll to make this simple.


#12

How would we use Redux tools with Mantra, like Chrome Redux Tools ?
Im not exactly sure where to put this code:

  applyMiddleware(thunk),
  ...
  typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
)(createStore);

#13

Im trying to add Accounts functionality right now and I’m having a hard time finding where to import Accounts from…i tried the following but it didn’t work -

import {Accounts} from ‘meteor/accounts-password’;


#14

@arjunrajjain I am now facing the same issue with creating an Authentication system, I can’t quite see how to make this work.
Did you manage to figure this out?


#15

I’d love to see a mantra (react) derived package that makes accounts authenitification as friendly as meteor 1.2.


#16

This is a similar tutorial, journal app, but with users, might help https://medium.com/@kenrogers/build-a-journaling-app-with-meteor-1-3-beta-react-react-bootstrap-and-mantra-7965d9e9fc23#.fbbe5645p

I also have found it hard gather meteor react resources. I made a list here Step-by-step Meteor + React Books, Courses and Tutorials

Please add to the list of you find new resources.


#17

@arunoda would you be able to create a simple example of this? I’m having trouble initializing my store with collection data. I’m doing something like this in my container:

if (subscription.ready()) {
    const offerings = Collections.Offerings.find().fetch();
    Store.subscribe(() => {
      onData(null, {
        store: Store,
        offerings
      });
    });
  }

but the component never renders. I’ve been trying to find the best approach on initializing collection data in a redux store but have not found one yet.