Introducción a React Native 

Por Luis Porras

@lporras16

Qué es React Native?

React Native

  • Crear Apps Nativas con Javascript
  • Usando conceptos de React.js
  • Sin usar Webviews
  • Getting Started

Por qué React Native ?

Por qué React Native

  • Aprende una vez, escribe donde sea
  • Flujo de desarrollo web
  • Free, open source
  • Live-reload
  • Flexbox layout, estilos CSS
  • Native
  • Comunidad

y porque es Cool 

React Basics

Component

Component

Props

var HelloDude = React.createClass({
  render: function() {
    return (
      <Text>Hello {this.props.dude}!</Text>
    );
  }
});  

State

var SampleApp = React.createClass({
    getInitialState() {
      return {count: 0};
    },

    incrementCount() {
      this.setState({
          count: this.state.count + 1
      });
    },

    ...
});
  • mutable
  • private to the component
  • change => re-rendering

Rendering

var React = require('react');

var SampleApp = React.createClass({
    getInitialState() {
      return {count: 0};
    },

    incrementCount() {
      this.setState({
          count: this.state.count + 1
      });
    },

    render() {
      return (
        <div>
          <h2>My first React app</h2>
          <span onClick={this.incrementCount}>
            {this.state.count} clicks
          </span>
        </div>
      )
    }
});

React.render(<SampleApp />, document.querySelector('body'));

Virtual DOM

React Native

var React = require('react-native');
var {View, Text} = React;

var SampleApp = React.createClass({
    getInitialState() {
      return {count: 0};
    },

    incrementCount() {
      this.setState({
          count: this.state.count + 1
      });
    },

    render() {
      return (
        <View style={styles.container}>
          <Text style={styles.welcome}>My first React app</Text>
          <Text onPress={this.incrementCount}>
            {this.state.count} clicks
          </Text>
        </View>
      )
    }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  ...
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);
  • No DOM
  • Flex layout

React Native vs. React

Native UI components

View, Text, Image, ScrollView, DatePickerIOS, PickerIOS, ListView,
Navigator, SwitchIOS, MapView, AlertIOS, WebView, Touchable, TabBarIOS, SegmentedControlIOS, ActivityIndicatorIOS, CameraRoll, NetInfo, PanResponder, StatusBarIOS, TextInput, SliderIOS, PushNotificationIOS, LinkingIOS, ActionSheetIOS, AsyncStorage, Geolocation, VibrationIOS, Video, Camera, AudioRecorder, etc..

Demo

Crear el proyecto

brew install node
brew install watchman
brew install flow
npm install -g react-native-cli
react-native init AwesomeApp

Tutoriales / Cursos

Gracias