Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Varun Vachhar
@winkerV eck
React Native
H rid App
H rid App  Are
A we  view
running a we  app
with acce  to native API
that  ou  uild once and deplo
ever where
React Native I  An
xten ion of H rid
What I  It?
An em edded in tance of
Java criptCore.
React component  with  inding  to
native UI component .
Manipulating c...
Pol fill
 & 
C  (Flex ox)!
Getting  tarted
In tall Node
 (optional)
Create a New Project
  
  
Platform  pecific  xten ion
// MyComponent.ios.js 
// MyComponent.android.js 
 
import MyComponent from './components/MyCo...
Flex ox
how Me
the Code
Component
class MyComponent extends Component { 
  render() { 
    return ( 
      <View style={styles.container}> 
      ...
t le
const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'cen...
De ugging
More De ugging
Touch
Toucha leHighlight and Toucha le*
Ge ture Re ponder  tem &
PanRe ponder
Network
fetch('https://mywebsite.com/endpoint/', { 
  method: 'POST', 
  headers: { 
    'Accept': 'application/json',
   ...
Animation
Declarative
Compo a le: parallel,  equence &  tagger
Ge ture  and event  can drive animation
Navigator
Will feel familiar
tack  a ed
Pu h/pop  tate
 call ack decide  what to
render
Timer
      
      
      
 
Wh  u e it?
Native
Look and
Feel
Performance
True Multi-Threading
Java cript ha  it'  own thread. We can move
image proce ing, data manipulation , etc.
to a different ...
Developer  fficienc
React Native i
xten i le
Learn Once, Write An where
Varun Vachhar
githu .com/winkerV eck / potif -arti t-
lookup
@winkerV eck
Thank You!
Upcoming SlideShare
Loading in …5
×

Intro To React Native

5,485 views

Published on

Intro To React Native
with Varun Vachhar

OVERVIEW

React Native introduces a new way to write native mobile apps. You can take everything that you know and love about React and apply it to native apps. Unlike hybrid apps, it gives you access to both native APIs and UI components. The application logic uses JavaScript whereas, the UI is fully native! It also brings the best of the web to native, things like – flexbox layout model, XMLHttpRequest, requestAnimationFrame, etc.

OBJECTIVE

To introduce the audience to React Native. Show how they can leverage their knowledge of web development to build native apps.

TARGET AUDIENCE

Developers familiar with React who are interested in building native mobile apps.

ASSUMED AUDIENCE KNOWLEDGE

Basic knowledge of React, ES6 and CSS.

FIVE THINGS AUDIENCE MEMBERS WILL LEARN

What is React Native
How it is an extension of hybrid
How to use polyfills to leverage the best of the web while getting native performance
How to debug React Native apps
How to use Flexbox and CSS for styling a React Native app

Published in: Internet
  • Be the first to comment

Intro To React Native

  1. 1. Varun Vachhar @winkerV eck React Native
  2. 2. H rid App
  3. 3. H rid App  Are A we  view running a we  app with acce  to native API that  ou  uild once and deplo ever where
  4. 4. React Native I  An xten ion of H rid
  5. 5. What I  It? An em edded in tance of Java criptCore. React component  with  inding  to native UI component . Manipulating call  into O jective C & Java for  ehavior. And pol fill  for  ome we  API Native App React Native li rar Java cript  ngine React J React Native J Li rar Your app
  6. 6. Pol fill  &  C  (Flex ox)!
  7. 7. Getting  tarted In tall Node  (optional)
  8. 8. Create a New Project      
  9. 9. Platform  pecific  xten ion // MyComponent.ios.js  // MyComponent.android.js    import MyComponent from './components/MyComponent'; 
  10. 10. Flex ox
  11. 11. how Me the Code
  12. 12. Component class MyComponent extends Component {    render() {      return (        <View style={styles.container}>          <Text style={styles.welcome}>            Welcome to React Native!          </Text>          <Text style={styles.instructions}>            To get started, edit index.android.js          </Text>          <Text style={styles.instructions}>            Shake or press menu button for dev menu          </Text>        </View>      );   }  }    AppRegistry.registerComponent('MyComponent', () => MyComponent); 
  13. 13. t le const styles = StyleSheet.create({    container: {      flex: 1,      justifyContent: 'center',      alignItems: 'center',      backgroundColor: '#F5FCFF',    },    welcome: {      fontSize: 20,      textAlign: 'center',      margin: 10,    },    instructions: {      textAlign: 'center',      color: '#333333',      marginBottom: 5,    },  }); 
  14. 14. De ugging
  15. 15. More De ugging
  16. 16. Touch Toucha leHighlight and Toucha le* Ge ture Re ponder  tem & PanRe ponder
  17. 17. Network fetch('https://mywebsite.com/endpoint/', {    method: 'POST',    headers: {      'Accept': 'application/json',     'Content‐Type': 'application/json',    },    body: JSON.stringify({      firstParam: 'yourValue',      secondParam: 'yourOtherValue',    })  }); 
  18. 18. Animation Declarative Compo a le: parallel,  equence &  tagger Ge ture  and event  can drive animation
  19. 19. Navigator Will feel familiar tack  a ed Pu h/pop  tate  call ack decide  what to render
  20. 20. Timer                       
  21. 21. Wh  u e it?
  22. 22. Native Look and Feel
  23. 23. Performance
  24. 24. True Multi-Threading Java cript ha  it'  own thread. We can move image proce ing, data manipulation , etc. to a different thread.
  25. 25. Developer  fficienc
  26. 26. React Native i xten i le
  27. 27. Learn Once, Write An where
  28. 28. Varun Vachhar githu .com/winkerV eck / potif -arti t- lookup @winkerV eck Thank You!

×