React Native for Android developers

An introduction to React Native for developers on Android & similar platforms

Transcript

1. React Native for Android Anirudh S Engineer, Hasura HASURA
2. WHAT IS REACT NATIVE?
4. Timeline React JS deployed on Facebook’s newsfeed 2011 React deployed on instagram.com 2012 Open sourced at JS Conf US May 2013 React Native announced at React.js Conf Feb 2015 React Native open sourced Feb 2015 React Native released for Android Sep 2015
5. Target Audience for React Native Web developer Android developer iOS developer Knows Javascript - ES6 Written & shipped Android apps Written & shipped iOS apps Familiar with a modern framework Familiar with Android best practices Familiar with iOS best practices Want to write mobile apps Want to write cross-platform apps Want to write cross-platform apps
6. WHY REACT NATIVE?
7. Advantages over Android workflow • Reusable code • Faster build times (Live Reloading!) • Faster deployment times • React patterns
8. Blueprint to become a React Native dev Native (Android Java) Javascript ES6 React patterns React Native basics Backend Redux Source: Spencer Carli (@spencer_carli)
9. REACT PATTERNS
10. Features • One-way data flow • Virtual DOM • JSX • Architecture beyond HTML
11. JSX var HelloMessage = React.createClass({ render: function () { return <h1>Hello {this.props.message}!</h1>; } }); ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root'));
12. Components • Building block of any UI • Modular, composable • 2 types: Container & Presentation • props & states
13. Component API • this.props • this.state • this.setState(object newState)
14. Component Lifecycle API • Mounting cycle • Updating cycle
15. Mounting cycle • constructor(object props) • componentWillMount() • render() -> React element • componentDidMount()
16. Updating cycle • componentWillReceiveProps(object nextProps) • shouldComponentUpdate(object nextProps, object nextState) -> boolean • componentWillUpdate(object nextProps, object nextState) • render() -> React element • componentDidUpdate(object prevProps, object prevState)
17. Styles • Inline <Text style={{color: ‘green’}}>Hello MODS</Text> • Stylesheet <Text style={styles.mods}>just red</Text> const styles = StyleSheet.create({ mods: { color: ‘green’ } });
18. Flex box •Specify the layout of children • Combination of • flexDirection - orientation of primary axis • justifyContent - distribution along primary axis • alignItems - alignment along secondary axis
19. REACT NATIVE
20. Setup npm install -g react-native-cli
21. Hello World import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
22. First party components ActivityIndicator DrawerLayoutAndroid Image ListView MapView Navigator Modal Picker ProgressBarAndroid RefreshControl ScrollView Slider StatusBar Switch Text TextInput ToolBarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView
23. Networking • Fetch & Promise • Third-party libs that work with XMLHttpRequest • WebSockets
24. Navigators • Scenes • Navigators • React Native Router (react-native-router-flux)
25. Platform specific code • Platform modules Platform.select({ ios: { backgroundColor: 'blue', }, android: { backgroundColor: 'green', }} • Platform-specific extensions NewComponent.ios.js NewComponent.android.js
26. Integration with existing apps • Add com.facebook.react:react-native:+ to your app’s build.gradle • Add an entry for the local RN maven directory in your project’s build.gradle • Add Internet permission in your AndroidManifest.xml • Create an Activity that • creates a ReactRootView • starts a React application inside it • sets it as the main content view • Pass some activity lifecycle callbacks to the ReactInstanceManager • Also pass back button events to React Native • Hook up the dev menu • Run your app
27. Native modules • A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript • getName method • getConstants method • Java methods annotated by @ReactMethod & return void • Use corresponding Argument types • Register the module in the createNativeModules method of your apps package • The package needs to be provided in the getPackages method of the MainApplication.java
28. Native UI components • Create the ViewManager subclass • Implement the createViewInstance method • Expose view property setters using @ReactProp (or @ReactPropGroup) annotation • Register the manager in createViewManagers of the applications package • Implement the JavaScript module
29. Debugging • In-App Developer Menu • Reload JS • In-app Errors & Warnings • Console logs • Chrome Dev Tools • Debugging Native code • Performance Monitor
30. Testing • Jest Tests - npm test • Unit Tests - ./scripts/run-android-local-unit-tests.sh • Integration Tests - ./scripts/run-android-local-integration- tests.sh
31. TOOLS
32. Tools • Nuclide • Deco • Exponent • CodePush • Ignite • Reactroton
33. RESOURCES
34. Resources • Awesome React Native • JS.coach • React Native playground • F8 App • makeitopen.com
35. GROWING PAINS
36. Concerns • Android is newer • Open bugs • Fix core RN bugs if your app is affected • Getting used to the patterns
37. CONTRIBUTING TO REACT NATIVE FOR ANDROID
38. Submitting a Pull Request 1. Fork the repo and create your branch from master. 2. Describe your test plan in your commit. If you've added code that should be tested, add tests! 3. If you've changed APIs, update the documentation. 4. If you've updated the docs, verify the website locally and submit screenshots if applicable. $ cd website $ npm install && npm start go to: http://localhost:8079/react-native/index.html 5. Add the copyright notice to the top of any new files you've added. 6. Ensure tests pass on Travis and Circle CI. 7. Make sure your code lints (node linter.js <files touched>). 8. If you haven't already, sign the CLA. 9. Squash your commits (git rebase -i). one intent alongs with one commit makes it clearer for people to review and easier to understand your intention
39. anirudh24seven Where can you find me?