Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native - An Introduction

Brendan Nee
September 23, 2017

React Native - An Introduction

Brendan Nee

September 23, 2017
Tweet

More Decks by Brendan Nee

Other Decks in Technology

Transcript

  1. WHAT IS REACT? class MyComponent extends React.Component { render() {

    return <div>Hello World</div>; } } const mountNode = document.getElementById('root'); ReactDOM.render(<MyComponent />, mountNode); REACT EXAMPLE
  2. const element = <div>Hello World</div>; WHAT IS REACT? JSX Syntax

    extension to Javascript HTML inside of Javascript Template Language Optional (but suggested)
  3. class MyComponent extends React.Component { render() { return <div>Hello {this.props.name}</div>;

    } } const mountNode = document.getElementById('root'); ReactDOM.render(<MyComponent name="John" />, mountNode); WHAT IS REACT? REACT EXAMPLE - PROPS
  4. WHAT IS REACT NATIVE? ReactNative instead of ReactDOM <View> <Text>

    <Image> instead of <div> <span> Supports stylesheets
  5. WHAT IS REACT NATIVE? import React from 'react'; import {AppRegistry,

    View, Text, Button} from 'react-native'; class MyComponent extends React.Component { render() { return ( <View> <Text>Hello world!</Text> <Button title="Submit" /> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent); REACT NATIVE EXAMPLE
  6. WHAT IS REACT NATIVE? REACT NATIVE EXAMPLE import React from

    'react'; import { AppRegistry, View, Text, Image } from 'react-native'; class MyComponent extends React.Component { render() { const picture = { uri: 'https://i.imgur.com/b3iDL1u.png' }; return ( <View> <Text>Hello world!</Text> <Image source={picture} style={{width: 200, height: 112}} /> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent);
  7. STYLING REACT NATIVE import React from 'react'; import { AppRegistry,

    StyleSheet, View, Text } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, color: 'red', }, }); class MyComponent extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello world!</Text> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent);
  8. MORE NATIVE COMPONENTS class MyComponent extends React.Component { render() {

    return ( <View style={styles.container}> <Text>Name</Text> <TextInput /> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent);
  9. REACT NATIVE COMPONENTS ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal

    Navigator NavigatorIOS PickerIOS Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView SegmentedControlIOS SliderIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView
  10. NETWORKING fetch('https://mywebsite.com/mydata.json'); fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json',

    'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) })
  11. GETTING STARTED > create-react-native-app AwesomeProject To run your app on

    iOS: cd /Users/brendannee/Sites/AwesomeProject react-native run-ios - or - Open ios/AwesomeProject.xcodeproj in Xcode Hit the Run button To run your app on Android: cd /Users/brendannee/Sites/AwesomeProject Have an Android emulator running (quickest way to get started), or a device connected react-native run-android