Introduction to React Native for Beginner

Introduction to React Native for Beginner merupakan slide presentasi untuk mempelajari aReact Native untuk pemula.

Slide ini adalah materi yang saya sampaikan kemarin ketika ada acara Facebook Developer Circles Surabaya Goes to Campus di Universitas Madura.

Transcript

1. React Native Introduction to
2. Umar Fadil, S.Kom Android Developer at PT. Piramida Teknologi Informasi Github @umarfadil Contact umarfadil.skom@gmail.com saya@umarfadil.com @_umarfadil DevC Surabaya SQUAD, AndroidDev Surabaya KSL Pamekasan
3. From Facebook Sharing Knowledge Collaborate Build New Ideas Learn about the latest technologies from Facebook and other industry leaders.
4. Types of Apps Available on Mobile Device
5. • Coded in HTML5, Javascript, CSS • Run in Browser • Cross Platform • No Access to Native API • Can not run Offline Mobile Web Apps
6. • Coded in Native Language (Java/Kotlin = Android , Swift/Obj.C = iOS) • Use Native API, and access all functionality on the device • Lightweight • Best User Experience • Not Cross Platform • Expensive : hire separate developers for each device Native Apps
7. • Web App that is Wrapped in Native App (ie. WebView) • Ionic, PhoneGap, Cordova • Cross Platform • Not Clean, Smooth as Native App Hybrid Apps
9. What is REACT? React is JavaScript library for building User Interface on Website
10. What about REACT NATIVE? Framework for building Native Mobile Apps using Javascript and React.JS Library
11. Cross Platform
12. How React Native Works?
13. Normal JavaScript Works
14. React Native Works
15. Why React Native…?
16. Kelebihan • javascript • Fitur Hot Reloading • Codepush -> Update your Apps without uploading to Store • Shared Codebase
17. Kekurangan • Everything is a Component • Javascript -> perkembangannya sangat cepat • Platform -> build IOS harus ada Mac.
18. Trends
19. Who’s using React Native
20. Getting Started…
21. Key To Learn…? •- It's all about component •- JSX •- Props and State •- Component LifeCycle •- Component Types & Role
22. Getting Started Basic ES2015/ES6 Learn React.js Install iOS / Android Development Tools || Expo.io brew install node brew install watchman npm install -g react-native-cli react-native init Demo cd Demo react-native run-ios
23. Browser DOM vs Mobile • <div> • <img> • <span>,<p> • <ul>,<ol> <Text>Hello World…</Text> • <View> • <Image> • <Text> • <ListView>
25. Styling, Not really CSS Normal CSS .container { flex: 1; align-items: center; padding-top: 0; } ReactNative container: { flex: 1, alignItems: 'center', paddingTop: 30 }
26. JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.
27. export default class Demo extends Component { render() { return ( <View> <Text>Hello, Pamekasan</Text> </View> ); } }
28. Props export default class Demo extends Component { render() { return ( <View> <HelloWorld name={`Jendral`}/> </View> ); } } export default class HelloWorld extends Component { render() { return ( <Text> {`this.props.name`}/> </Text> ); } }
29. State export default class Demo extends Component { constructor(props) { super(props); this.state = { name:’Hello World’} } render() { return ( <View> <Text/>{’this.state.name’}</Text> <TouchableOpacity onPress={()=>{ this.setState({ name : ’New Name’ }) }}> <Text/>Ubah Nama</Text> </TouchableOpacity> </View> ); } }
30. Glossary https://facebook.github.io/react-native/ https://facebook.github.io/react-native/showcase.html https://www.logicroom.co/react-native-architecture-explained/