Basics React Native

Memahami dasar-dasar React Native, sehingga kita tidak kebingungan saat sudah memasuki dunia React Native

Transcript

1. Basic React Native For Begineer DevC Surabaya from Facebook
2. Co-Lead DevC Surabaya, Facilitator in Android Kejar, art, design, photograph, writing and I love Sintax Nila Wilda Al Aluf Front End Engineer at pinjam.co.id Github @nilawildaalaluf Contact sakura19aluf@gmail.com @nilawilda
3. Who’s Using React Native?
4. Why React Native? Solved Promblem? Dive in React Native
5. ! It’s Framework, While ReactJs is Library ! Same codeStyle with ReactJs ! Truly Native Mobile Apps For IOS and Android ! Faster the Hybrid Tech Why React Native?
6. ! UI Component (ReactJs) ! JSX Dive in React Native
7. Solved Promblem? ! Easy Build Apps IOS and Android ! Cross Platform ! Learn Once, Write Everywhere
8. The five key concepts are: . Components . JSX . Props & State . The Component API . Component Types React Native Concepts
9. In React, We Build Component, not Template Component
10. UI Component (ReactJs)
11. JSX
12. State import React, { Component } from 'react' import { TextInput, Text, View } from 'react-native' export default class State extends Component { constructor(){ super() this.state = { nama : ‘Jeny' } } render() { return ( <View> <Text>Nama Saya {this.state.nama} </Text> </View> ) } }
13. Props import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react- native'; class Greeting extends Component { render() { return ( <Text>Hello {this.props.name}!</Text> ); } } export default class LotsOfGreetings extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Greeting name='Rexxar' /> <Greeting name='Jaina' /> <Greeting name='Valeera' /> </View> ); } } AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
14. • npm install -g react-native-cli • react-native init ReactNativeApi • cd ReactNativeApi • react-native run-ios/react-native run-android Install React Native
15. 1 Learn Once, Write Everywhere Cost Efficiency 3 2 No More Civil War, Choose base on your needs Conclusion
16. Mau Jadi Programmer? Jangan Manja dan Malas Tetap Belajar dan Berusaha “Happy Code”