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.
Peter Magenheimer (@peterjmag)
I'm a front end developer at ResearchGate. And yes, we're hiring.
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).
Talks from FB
- React.js Conf 2015 Keynote - Introducing React Native - YouTube
- React.js Conf 2015 Keynote 2 - A Deep Dive into React Native - YouTube
- F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile - YouTube
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
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/
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 hi@peterjmags.com.