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

  • 648