A bit of context

This is a companion Gist for a talk that I gave at React Berlin in April 2015. The fine folks at Bitcrowd recorded all three of the evening's talks, so you can watch mine at https://www.youtube.com/watch?v=9ArhJiMGVDc.

Hi there!

React Berlin - Meetup #1

Peter Magenheimer (@peterjmag)
I'm a front end developer at ResearchGate. And yes, we're hiring.

Git repos

The web app we'll be "porting"
https://github.com/peterjmag/reading-list

The end result (hopefully!)
https://github.com/peterjmag/ReadingListIOS

If you'd like to follow along, check out ReadingListIOS's commit history. I'll be following similar steps during my talk (though not necessarily in exactly the same order).

React Native

Talks from FB

Tutorials

http://facebook.github.io/react-native/docs/tutorial.html
A very comprehensive tutorial by Colin Eberhart
http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

Component and API docs

They're in a state of... flux. =) But they're still not bad.
https://facebook.github.io/react-native/docs/getting-started.html

More resources

This community roundup on the React blog has a number of good React Native things
http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html

Some scattered links along the way

NavigatorIOS component
https://facebook.github.io/react-native/docs/navigatorios.html#content

WTFlexbox?
http://flexboxin5.com
[Ninja edit from the future: flexboxin5.com has been down for a while, so here's a mirror: https://cvan.io/flexboxin5/]

Inline styles?!
https://speakerdeck.com/vjeux/react-css-in-js

Some good tips on isolation of components
http://facebook.github.io/react-native/docs/text.html#limited-style-inheritance
(It's a bit buried in the docs, but good stuff nonetheless.)

StyleSheet API good practices
http://facebook.github.io/react-native/docs/stylesheet.html#content

LinkView.DataSource
https://facebook.github.io/react-native/docs/tutorial.html#listview https://facebook.github.io/react-native/docs/listview.html#content

TouchableHighlight component
https://facebook.github.io/react-native/docs/touchablehighlight.html#content

WebView component
https://facebook.github.io/react-native/docs/webview.html#content

Testing a React Native app on your iPhone / iPad
http://stackoverflow.com/a/29304365/349353

I might reference (or steal code from) FB's "Movies" example:
https://github.com/facebook/react-native/tree/master/Examples/Movies

Components, components, components!

Higher-Order Components
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Smart and Dumb Components
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Stuff I used in the web app

RefluxJS
https://github.com/spoike/refluxjs

ECMAScript 6
https://babeljs.io/docs/learn-es6/

Babel (formerly 6to5) - Use ES6+ today
https://babeljs.io/

webpack - Browserify on steroids
http://webpack.github.io/

React Hot Loader
http://gaearon.github.io/react-hot-loader/

Feedback?

I'd love to hear it! Feel free to talk to me afterwards, tweet at me, or just add it as a comment on this Gist. If you'd like to give me private feedback, that's cool too—just email me at [email protected].