React Warsaw #3

React Native

Introduction to building native mobile applications with React

Marcin Mieszek

We will talk about:

Mobile development challenges

Why React Native?

Architecture

Getting Started

Standard Components

Styles

Mobile development challenges

Slow development and deployment cycle

Platform specific skillset

Stateful, mutable UI

Poor performance of html-based frameworks

Why React Mative?

Instant reload

Updates without resubmission

Consistent tooling and common APIs for web and mobile

Shared skillset

Code reuse

Backed by native components

Immutable views

External modules and components

Browser debugging

Architecture

JavaScript Framework

Reuse JS and React experience

Wrapper to standard native IOS or Android Components/APIS

All operations are asynchronuous

Powerful gestures support including mutlitouch

Getting Started

Mac + Xcode

npm install -g react-native-cli

react-native init HelloWorldProject

First Component


import React, {
  AppRegistry, Component, Text, View,
} from 'react-native';

class Hello extends Component {
  render() {
    return (
    	<View><Text>Hello, World!</Text></View>
    )
  }	
}	

AppRegistry.registerComponent('Hello', () => Hello);

Components

View

Text

TextInput

TouchableHighlight

Image

ListView

ScrollView

TabBarIOS

Styles and Flexbox


var styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});
					

<View style={styles.container}>
  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>

JS Styles Quirks

Camel case

Quote text values

Use numbers for dimensions (React adds 'px')

Commans instead of semicolons

Flexbox Froggy

http://flexboxfroggy.com/

Tips

React Native Playground

https://rnplay.org/

Redux

For working example see: https://github.com/alinz/example-react-native-redux


const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CounterApp />
      </Provider>
    );
  }
}
					

export default connect(state => ({
    state: state.counter
  }),
  (dispatch) => ({
    actions: bindActionCreators(counterActions, dispatch)
  })
)(CounterApp);

Thanks!

Questions?