Intro to React Native and Apollo Client

Slide 1

Slide 1 text

Intro to React-Native and Apollo-Client

Slide 2

Slide 2 text

Hi, I’m Emi Working at Modus Create Volunteer at JSHeroes @emi_codes

Slide 3

Slide 3 text

Agenda React-Native Setup App Structure Debugging Styled-Components React-Navigation Apollo-Client Oﬄine Support Testing Next Steps

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

⚛ React-Native

Slide 6

Slide 6 text

React Native lets you build awesome mobile apps for both iOS and Android using only JavaScript & React

Slide 7

Slide 7 text

React Components

Slide 8

Slide 8 text

Credit: Animations in React Native - Pusher Blogpost

Slide 9

Slide 9 text

What is this black magic?

Slide 10

Slide 10 text

React Native Architecture The JavaScript Realm The Native Realm The Bridge JavaScript  JSCore (VM)  Single Thread Swift/Java  Main UI Thread  Other background threads

Slide 11

Slide 11 text

Credit: The State of React Native (2018) by Ram N

Slide 12

Slide 12 text

Setup

Slide 13

Slide 13 text

App Structure

Slide 14

Slide 14 text

Debugging

Slide 15

Slide 15 text

Styled Components

Slide 16

Slide 16 text

➡ React-Navigation

Slide 17

Slide 17 text

Apollo Client

Slide 18

Slide 18 text

Oﬄine Support

Slide 19

Slide 19 text

✅ Testing

Slide 20

Slide 20 text

Next Steps ➡ Check out the full source code: • https://github.com/emimuresan/githubber ➡ Working with Github’s GraphQL API: • https://developer.github.com/v4/guides/forming-calls/ ➡ Check of react-native resources at JSHeroes > JavaScript Knowledge repo: • https://github.com/jsheroes/javascript-knowledge/blob/master/react-native.md

Slide 21

Slide 21 text

/ Thank you!