

an Introduction to React Native
Joe Fazzino
@PureFazz



🤖 about me 🤖
🤔 what is react native 🤔
From the Docs - https://facebook.github.io/react-native/

@PureFazz
Text
⛔️ Write once, Run everywhere ⛔️
✅ Learn once, Write everywhere ✅
"~95% code sharing" (Fluid.work)
- Some people
- Actually Facebook
- Joe Fazzino
@PureFazz
👍 React native Features 👍
@PureFazz
- Hot Reloading
- Piecemeal integration
- UI Layout (Flexbox)
- Community
(this is not everything but I've only got 20 minutes!)
🤷♂️ The developer experience 🤷♂️
- Multiple codebases
- Multiple skillsets
- Muiltiple tools
- Multiple departments
@PureFazz
before...
or...

👍 The developer experience 👍
@PureFazz
- One codebase (more or less)
- Single re-usable skilset
- Editor of choice (it's just JavaScript)
- One team across multiple platforms
AFTER...
https://github.com/SaraVieira/awesome-react-platforms
😡 red screen of anger 😡




@PureFazz
@PureFazz
😰 common misconceptions 😰
🗺 navigation is bad
🚀 Every release is a breaking change
☎️ you can't make a native ui
@PureFazz

https://goo.gl/STVkY3
myth
myth (which platform?)

@PureFazz


@PureFazz

myth (which platform?)
👩🏫 Getting started x2 👨🏫
React Native CLI - yarn global add react-native-cli
CRNA - yarn global add create-react-native-app
👨💻 How to start? 👨💻

40.92 seconds

@PureFazz
🏁 How to start? 🏁
1 minute 8 seconds


@PureFazz
React Native code
Hawaii Contrast (Rainglow)

@PureFazz
React code

@PureFazz
React native code
github.com/joefazz/react-native-web-starter
react native web code
@PureFazz

@PureFazz

@PureFazz
🤑 React as a platform 🤑
📱 summary 📱
@PureFazz
React native is...
✅ Native
✅ Cross platform
✅ JavaScript
✅ React
🔥 lit 🔥
🎉 Thank you 🎉
Twitter: @purefazz
Github: joefazz
Medium: @purefazz
https://slides.com/purefazz/introduction-to-react-native
Introduction to React Native
By purefazz
Introduction to React Native
- 662