Meteor + React + Mantra tutorial/walkthrough

vonwao · January 31, 2016, 11:14pm

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.

t35h · February 1, 2016, 12:14am

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!

arunoda · February 1, 2016, 1:01am

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.

mipasov · February 1, 2016, 7:31am

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.

vonwao · February 1, 2016, 5:49pm

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.

t35h · February 1, 2016, 11:30pm

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.

uberom · February 2, 2016, 2:16am

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

arunoda · February 2, 2016, 2:51am

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

Mantra related content will appear soon.

ciwolsey · February 2, 2016, 3:02am

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

gist.github.com

https://gist.github.com/ciwolsey/6a2f3573e6e18a0db453

gistfile1.js

import PostList from '../components/postlist/index.jsx';
import {useDeps} from 'react-simple-di';
import {composeWithTracker, composeAll} from 'react-komposer';

export const composer = ({context}, onData) => {
  const {Meteor, Collections} = context();
  if (Meteor.subscribe('posts.list').ready()) {
    const posts = Collections.Posts.find().fetch();
    onData(null, {posts});
  }

This file has been truncated. show original

…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

uberom · February 2, 2016, 3:04am

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

arunoda · February 2, 2016, 3:41am

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.

etmarch · February 3, 2016, 12:41am

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);

arjunrajjain · February 3, 2016, 1:05am

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’;

jasonweise · February 16, 2016, 8:24pm

@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?

jitterbop · February 17, 2016, 9:28am

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

joshpitzalis · February 28, 2016, 10:17am

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.

purplecones · June 2, 2016, 2:15pm

@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.