I’ve been on a tear with Meteor-React lately, and I must say I’m now 100% sold on React. Building a fully functional Tinder interface took me about 4 hours of effort and 150 lines of code, and it’s so easily maintainable!
You can read more about it here, or check out the repo here.
Thanks so much for this series - I really appreciate it as a newbie to React and Ionic
4 hours for you - but it will be my weekend study.
You’re welcome! It was a fun project 
Also, if you can think of any other features you’d like to learn now to implement, let me know! I’m always looking for future topics.
I think imprroving performance of this code would be interesting. It is somehow laggy on ios.
There are a ton of optimizations on the deploy branch 
Check it out and let me know if you have any questions.
Looks awesome.
I haven’t tried anything with React yet.
Am I the only one thats totally confused by how the react code is structured?
Like these snippets:
Is it HTML mixed in with JS? Reminds me of PHP.
I think everyone who uses React goes through a phase of… yuck!, why is this so popular, then ooooooh, and finally… brilliant! This short video explains it better than I can: https://www.youtube.com/watch?v=DgVS-zXgMTk
I hated it myself until I used it in React Native. It also felt better because there isn’t dogma with mixing views and logic with iOS.
Also technically it’s not HTML. The <div foo='bar'> parts are actually sugar for function calls. For instance here’s what a form de-sugars to:
// before
<form>
<input type='email'>
<input type='password' ref='pass'>
<input type='submit' value='go'>
<div>{ this.state.errMsgContent }</div>
</form>
// after
React.createElement("form", {onSubmit: this.handleSubmit},
React.createElement("input", {type: "email"}),
React.createElement("input", {type: "password", ref='pass'}),
React.createElement("input", {type: "submit", value: "go"}),
React.createElement("div", null, this.state.errMsgContent)
);
You can actually just write the latter if that’s preferred.
I like JSX because you can abstract away things like bootstrap classes into something like:
<row>
<column width='4'>
Foo
</column>
<column width='8'>
Bar
</column>
</row>
Just for you @geritol, I wrote another article on how you can optimize for iOS
Let me know if you have any more questions! I’m happy to help.
Yeah, I’m with @SkinnyGeek1010. I resisted it at first, but once I started getting into it, I realized that it’s really awesome! Especially when it comes to maintainability, since the functions that are relevant to a particular component live in that component rather than in some random part of a javascript file.
I found this article really compelling. Check it out if you have time:
Thanks for the awesome reply!
Sorry I did read it and I checked out that video.
It has gotten me very intrigued and I am keen to learn more about how this might change meteor…
I think I need to get my head around it a bit more but it does sound pretty awesome!
@samcorcos thank you a TON for this tutorial. As someone who’s not new to Meteor, but who is new to Ionic & React, it’s helping me immensely.
Question, to make sure I’m understanding this correctly: is the full speed & optimization of this app only realized in the native app environment?
I’m running the demo (tinderclone.meteor.com) in Chrome on my Nexus 6 and it’s a bit laggy. But it seems like Ionic is intended to take advantage of hardware acceleration on mobile devices, so can I expect better performance once compiled into a native app?
EDIT: to clarify, it runs magnificently in desktop Chrome in the devtool’s Nexus 6 emulator. But not so much in Chrome on the actual Nexus 6.
I’m asking because I want to apply these ideas to an app that will be both native and web-based, so I’m wondering what kind of performance folks on the mobile web can expect.
EDIT 2: I realized the sluggishness was because of the box-shadow Ionic applies to its cards. Take that out, and it works like a champ! Thanks again Sam!!
