ERICA MITCHELL

Frontend developer, veteran, user advocate.

#rnforwebdevs

@duggiemitchell

Why React?

Popularity

Productivity

Declarative

@duggiemitchell

#rnforwebdevs

Just JavaScript

@duggiemitchell

#rnforwebdevs

React is a JavaScript Library for building user interfaces.

@duggiemitchell

#rnforwebdevs

React Native under the hood

@duggiemitchell

#rnforwebdevs

What is the tech stack?

React Native uses JavaScript APIs to display and style native components.

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

type Props = {
  name: string
};


const styles = StyleSheet.create({
  greeting: {
    alignItems: 'center'
  },
  names: {
    alignItems: 'center', 
    top: 50
  },
});

const Greeting: React.FunctionComponent<Props> = ({name}) => {
    return (
      <View style={styles.greeting}>
        <Text>Hello {name}!</Text>
      </View>
    );
}

const App = <Greeting name="Erica"/>
export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, 
      //  so the children can't expand.
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

Typical mobile layout

What about native modules?

Expo

A free and open source toolchain built around React Native to help you build native iOS and Android apps using JavaScript and React.

https://expo.io/

Let's see some code...

#rnforwebdevs

@duggiemitchell

Limitations? Takeaways?

  • Lack of support for all iOS  & Android features
  • Lack of controls for customization
  • Lower performance than native apps
  • Meh, development experience 
  • vs Mobile Web
  • vs other cross platform solutions

#rnforwebdevs

@duggiemitchell

Learn more:

Best courses to learn React Native

http://www.reactnative.com/courses/

React Native Docs

https://facebook.github.io/react-native/

@duggiemitchell

#rnforwebdevs

Reactiflux Discord Community

https://www.reactiflux.com/

Coding Prompts for your portfolio

https://bit.ly/2X9TzAV​

Questions?

react native for web developers

By erica mitchell

Made with Slides.com

react native for web developers

CSG August Lightening Talks

  • 787

More from erica mitchell