Getting Started with Meteor 1.3 and React

I just published a simple article for anyone who is looking to use React with Meteor 1.3.
Here we are using React directly from NPM.

I have also added few notes on using React with NPM and some other things to consider when using NPM modules.

Read It: Getting Started with Meteor 1.3 and React

9 Likes

Good stuff! A few questions/issues:

  1. You’ve got a space between -- and release for creating the new Meteor app.
  2. Why port 3003 instead of just the default by running meteor?

Also, with respect to react-mounter:

In order to use the React context, you need to render the content component inside the layout. So we need to pass a function instead of the React element.

I noticed in your example, you didn’t pass content as a function. What’s the difference between passing a function to content and just passing the React component? What do you mean we won’t have access to the React context? (do you literally mean React context?)

– release is a typo. Will fix it.
Port 3003 just a port. Use whatever you like. :smile:

Yes. That’s the react context we mentioned. As said the docs, you don’t need to use it directly.

Mantra uses it for dependency injection. Also Redux react, Meterial UI and many others.

That’s why I mentioned it in the react-mounter docs. It’s optional.

Makes sense. So if we’re using Material UI, then we need the content: () => <Yo /> format.

Yep. That’s correct.

1 Like

In our application we do all our stuff in packages i.e. package based architecture. So we have a package which basically has all the dependencies of our application and we expose it through a single package including any npm dependencies. There are other packages which use this core package.

With Meteor 1.3 do we need to make changes to our package structure or does it now even make sense to have a package based architecture since we can create modules.

Your old structure will still work but it might make sense to migrate to a module based structure to eliminate some of the boilerplate of the package.js files.

1 Like

As @sashko mentioned, better to move module based file layout pattern.

I think you guys should add a recommended folder structure to the meteor guide for 1.3.

3 Likes

Is a React based version of Meteor Guide in works? Does anyone know?

Will meteor still honour the client and server directories loading on client and server respectively or will it have client and server entry points like webpack.

We’re going to cover folder structure for modules in the guide: http://guide.meteor.com/#future

Note that existing apps will work with no changes (every file is an entry point) and files become lazy-loaded when you put them in the imports directory. This means that most apps will have only a couple files outside of imports.

As for React in the Guide, here’s an issue, please post a comment there: https://github.com/meteor/guide/issues/194

@arunoda and to everyone. So with the new way of doing things, how to implement the onPress() function?

export const App = () => {

  // no more render() ?
  <div>
    <h2>Hello</h2>
    <button onClick={this.onPress}>Click Me</button>
  </div>

}

Your syntax is a bit off. There are two ways you can do:

export const App = () => {
  return <div>
    <h2>Hello</h2>
    <button onClick={this.onPress}>Click Me</button>
  </div>
};

or

export const App = () => (  // "return" is implied here
  <div>
    <h2>Hello</h2>
    <button onClick={this.onPress}>Click Me</button>
  </div>
);

To answer your question though:

function onPress(event) {
  // do things
}

export const App = () => (  // "return" is implied here
  <div>
    <h2>Hello</h2>
    <button onClick={onPress}>Click Me</button>
  </div>
);
1 Like

And it’s okay to create a React class by extending React.Component when you need to handle actions.

Also if you need to use lifecycle hooks, you do that.

3 Likes

@ffxsam Thanks. Where are the docs for this new way of things? Also, this not working:

Uncaught ReferenceError: onPress is not defined

function onPress() {
  console.log('I was pressed');
},

<div>
  <button onClick={onPress}>Click Me</button>
</div> 

Double-check my code above. The onPress function should be defined outside of any React component.

1 Like

Ahhhhhhh!!! Gotch yah!

I realize this thread is a week old now, but the one thing I would love to see in the article, which I’m very confused about right now, is how do you get Meteor’s reactivity in React with Meteor 1.3? Do we still have to install Atmosphere packages for that? If so, which ones? And do we still need to use the mixin and resulting getMeteorData function?

I would prefer to use only NPM modules if that’s possible and would love it if FlowRouter became an NPM module as well.

@deejross I believe thats exactly whats happening here, there is only one package (besides FlowRouter) that you need to get from atmosphere, and thats react-meteor-data. All other react packages and components can be installed via npm.