Pada artikel kali ini kami akan membahas tentang Mendalami React Native Untuk Pemula. Tentu saja kita harus mendalami react native dulu untuk memulai menggunakan nya. Karena kalu kita Mendalami React Native kita akan lebih mudah untuk pengembangaya nantinya.
Ketika React Native diumumkan, reaksi pertama sangat positif. Secara tradisional, ketika kita berpikir tentang teknologi web di ruang bergerak, hal-hal seperti Apache Cordova muncul di pikiran, yang memungkinkan kita untuk mengemas situs web atau aplikasi web sebagai aplikasi untuk platform seluler. Dalam tutorial pemula ini, kita akan melihat arsitektur React Native, filosofi di balik Bawaan Asli, dan bagaimana hal itu berbeda dari solusi lain di ruang yang sama. Pada akhir artikel, kami akan mengubah aplikasi "Hello World" menjadi React Native One.
Ketika React Native diumumkan, reaksi pertama sangat positif. Secara tradisional, ketika kita berpikir tentang teknologi web di ruang bergerak, hal-hal seperti Apache Cordova muncul di pikiran, yang memungkinkan kita untuk mengemas situs web atau aplikasi web sebagai aplikasi untuk platform seluler. Dalam tutorial pemula ini, kita akan melihat arsitektur React Native, filosofi di balik Bawaan Asli, dan bagaimana hal itu berbeda dari solusi lain di ruang yang sama. Pada akhir artikel, kami akan mengubah aplikasi "Hello World" menjadi React Native One.
Mari kita mulai dengan mengatakan bahwa React Native adalah
teknologi yang relatif baru. Sudah resmi tersedia sejak Maret 2015, telah
berada di beta pribadi sejak awal tahun itu, dan secara internal digunakan di
Facebook untuk sementara waktu sebelum itu. Pepatah "Roma tidak dibangun
dalam sehari" umumnya berlaku untuk teknologi juga. Alat seperti mendengus
dan platform seperti Node.js membutuhkan waktu bertahun-tahun untuk matang. Di
dunia web, segala sesuatunya bergerak cepat, dan dengan sejumlah besar kerangka
kerja, paket, dan alat yang keluar setiap hari, pengembang cenderung menjadi
sedikit lebih skeptis dan tidak ingin melompat pada setiap hype ikut-ikutan
hanya untuk menyadari bahwa mereka berakhir dalam situasi mengunci vendor. Kami
akan membahas tentang apa yang membuat React Native special, mengapa itu adalah
teknologi yang layak masuk ke dalam, dan mencakup beberapa contoh di mana tidak
semua unicorn dan pelangi.
========================================================================
Under the Hood
Ketika berbicara tentang teknologi web di seluler, solusi yang tersedia biasanya termasuk dalam salah satu kategori berikut.Membangun Web Aplikasi di Mobile Web Browser
Aplikasi web hidup di browser seluler, biasanya disebut WebView. Tanpa refactoring besar apa pun, situs web atau aplikasi web berfungsi di perangkat seluler. Kami mungkin perlu mempertimbangkan acara peramban seluler seperti mengetuk atau mendengarkan perubahan orientasi perangkat dan layar yang lebih kecil untuk pengalaman pengguna yang lengkap, tetapi kami memiliki versi seluler yang berfungsi dengan sedikit usaha. Cordova / PhoneGap adalah pilihan paling populer dalam kategori ini. Sayangnya opsi ini memiliki kerugian besar: dalam beberapa kasus, aplikasi yang dikembangkan menggunakan Cordova secara signifikan lebih lambat daripada aplikasi asli, terutama untuk aplikasi berat grafis. Dalam kasus lain, sistem operasi seluler sebenarnya tidak menyediakan semua fitur di WebView yang tersedia di browser seluler. Pengalaman pengguna juga dapat berbeda dari aplikasi asli; ini mungkin terjadi karena aplikasi atau platform itu sendiri. Masalah ini dapat berkisar dari scrollbars tidak merasakan hal yang sama untuk memiliki penundaan yang nyata ketika mengetuk elemen.Mengkompile ke Native Technologies
Solusi yang benar-benar berbeda adalah membuat basis kode asli pada akhirnya. Ini terjadi dengan mengubah kode sumber asli menjadi bahasa pemrograman lain. Kami memperdagangkan kinerja asli untuk lapisan abstraksi dengan beberapa ketidakpastian. Dalam kasus solusi sumber tertutup, kami bahkan tidak yakin apa yang terjadi di bawah tenda dan dengan jenis kotak hitam apa yang kami hadapi. Dalam kasus lain, kami tidak yakin berapa banyak pembaruan sistem operasi seluler berikutnya yang akan merusak kode kami dan kapan perbaikan atau pembaruan akan tersedia. Contoh populer dari kategori ini adalah Haxe.Menggunakan JavaScript Layer
Di sini, kami menggunakan mesin JavaScript dari lingkungan seluler dan menjalankan JavaScript kami di sana. Kontrol asli dipetakan ke objek dan fungsi JavaScript, jadi ketika kita memanggil fungsi yang disebut fancyButtonRightHere (), sebuah tombol akan muncul di layar. NativeScript atau Appcelerator Titanium adalah contoh terkenal dari kategori ini.Bereaksi Bawaan dapat diklasifikasikan sebagai sesuatu dari kategori ketiga. Untuk versi iOS dan Android, React Native menggunakan JavaScriptCore di bawah kap mesin, yang merupakan mesin JavaScript default di iOS. JavaScriptCore juga merupakan mesin JavaScript di browser Safari Apple. Pengembang OS X dan iOS benar-benar dapat langsung berinteraksi dengan itu jika mereka mau.
Satu perbedaan besar adalah bahwa React Native menjalankan kode JavaScript dalam utas yang terpisah, sehingga antarmuka pengguna tidak terhalang dan animasi harus halus dan halus.
React adalah Key Feature
Perlu dicatat bahwa "Bereaksi" di Bereaksi Asli tidak diletakkan di sana oleh kecelakaan. Untuk Bereaksi Bawaan, kami memerlukan pemahaman tentang apa yang sebenarnya ditawarkan React. Konsep-konsep berikut bekerja sama di kedua Bereaksi dan Bereaksi Asli, meskipun contoh kode ini dirancang untuk dijalankan di browser.Single Rendering Entry Point
Ketika kita melihat komponen React sederhana, hal pertama yang mungkin kita perhatikan adalah komponen memiliki fungsi render. Bahkan, React melempar kesalahan jika tidak ada fungsi render yang didefinisikan di dalam komponen.var MyComponent = function() {
this.render = function() {
// Render something here
};
}; var MyComponent = function() {
this.render = function() {
return <div className="my-component">Hello there</div>;
};
}; var MyComponent = function() {
this.render = function() {
return React.createElement("div", {
className: "my-component"
}, "Hello there");
};
};
Unidirectional Data Flow
Untuk membangun konten komponen, Bereaksi menyediakan properti atau alat peraga untuk jangka pendek. Serupa dengan atribut XML, kita meneruskan props secara langsung ke komponen dan kemudian dapat menggunakan alat peraga di dalam komponen yang dibangun.var Hello = function(props) {
this.render = function() {
return <div className="my-component">Hello {props.name}</div>;
};
};
var Greeter = function() {
this.render = function() {
return <Hello name="there" />
}
}; Re-Render on Changes
Selain alat peraga, komponen juga bisa memiliki keadaan internal. Contoh paling menonjol dari perilaku itu adalah penghitung klik yang memperbarui nilainya ketika sebuah tombol ditekan. Jumlah klik itu sendiri akan disimpan di negara bagian.Masing-masing perubahan prop dan negara memicu render ulang lengkap dari komponen.
Virtual DOM
Sekarang ketika semuanya dirender kembali ketika alat peraga atau status berubah, bagaimana React sendiri melakukan itu dengan baik? Bahan ajaibnya adalah "Virtual DOM." Setiap kali sesuatu diperlukan untuk dirender ulang, representasi virtual dari DOM yang diperbarui dihasilkan. Virtual DOM terdiri dari representasi cahaya dari elemen-elemen yang dimodelkan setelah pohon komponen, membuat proses menghasilkannya jauh lebih efisien daripada menghasilkan elemen DOM yang sebenarnya. Sebelum menerapkan perubahan ke DOM asli, pemeriksaan dilakukan untuk menentukan di mana tepatnya di pohon komponen perubahan yang terjadi, diff dibuat, dan hanya perubahan spesifik yang diterapkan.Getting Started with this React Native Tutorial
Ada prasyarat tertentu yang perlu disiapkan pemula untuk dikembangkan untuk Bereaksi Bawaan. Karena iOS adalah platform pertama yang didukung, dan yang kami bahas dalam tutorial ini, kami memerlukan macOS dan Xcode, setidaknya versi 6.3. Node.js juga diperlukan. Apa yang membantu memasang Watchman melalui manajer paket Brew dengan menginstal pengawas buatan. Meskipun ini tidak diperlukan, tetapi membantu ketika berhadapan dengan banyak file di dalam proyek React Native kami.Bereaksi Bawaan: Kerangka Pengembangan Aplikasi Mobile Sanest.
Menciak
Untuk menginstal React Native, kita hanya perlu menginstal aplikasi baris perintah React Native dengan npm install -g react-native-cli. Memanggil perintah react-native kemudian membantu kami membuat aplikasi React Native baru. Menjalankan react-native init HelloWorld membuat folder bernama HelloWorld tempat kode boilerplate dapat ditemukan.
Transforming a React Application
Dengan React menjadi fitur utama dan prinsip-prinsip inti yang berasal dari perpustakaan React, mari kita lihat apa yang kita butuhkan untuk mengubah aplikasi React “Hello World” menjadi React Native.Kami menggunakan beberapa fitur ES2015 dalam contoh kode ini, khususnya kelas. Ini benar-benar layak untuk tetap dengan React.createClass atau menggunakan bentuk fungsi yang mirip dengan pola modul yang populer.
var React = require('react');
class HelloThere extends React.Component {
clickMe() {
alert('Hi!');
}
render() {
return (
<div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div>
);
}
}
React.render(<HelloThere name="Component" />, document.getElementById('content'));
Step 1: Embrace CommonJS Modules
Pada langkah pertama kita perlu mengubah membutuhkan modul Bereaksi untuk menggunakan bereaksi-asli sebagai gantinya.var React = require('react-native');
class HelloThere extends React.Component {
clickMe() {
alert('Hi!');
}
render() {
return (
<div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div>
);
}
}
React.render(<HelloThere name="Component" />, document.getElementById('content'));
Step 2: There Is No DOM
Tidak mengherankan, tidak ada DOM di ponsel. Di mana sebelumnya kita menggunakan <div />, kita perlu menggunakan <View /> dan di mana kita menggunakan <span />, komponen yang kita butuhkan di sini adalah <Text />.import React from ‘react';
import {View, Text, Alert} from ‘react-native';
class HelloThere extends React.Component {
clickMe() {
Alert.alert(‘hi!');
}
render() {
return (
<View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View>
);
}
}
React.render(<HelloThere name="Component" />, document.getElementById('content')); import React from ‘react';
import {View, Text, Alert} from ‘react-native';
class HelloThere extends React.Component {
clickMe() {
Alert.alert(‘hi!');
}
render() {
return (
<View className="box" onClick={this.clickMe.bind(this)}>
<Text>Hello {this.props.name}. Please click me.</Text>
</View>
);
}
}
React.render(<HelloThere name="Component" />, document.getElementById('content'));
Step 3: Inline Styles Are the Way to Go
React Native memungkinkan kita untuk menggunakan pemodelan Flexbox daripada mengotak-atik float dan inline-block yang sangat kita kenal di dunia web. Yang menarik adalah bahwa React Native tidak menggunakan CSS.import React from ‘react';
import {View, Text, StyleSheet, Alert} from ‘react-native';
class HelloThere extends React.Component {
clickMe() {
Alert.alert(‘hi!');
}
render() {
return (
<View style={styles.box} onClick={this.clickMe.bind(this)}>
<Text>Hello {this.props.name}. Please click me.</Text>
</View>
);
}
}
var styles = StyleSheet.create({
box: {
borderColor: 'red',
backgroundColor: '#fff',
borderWidth: 1,
padding: 10,
width: 100,
height: 100
}
});
React.render(<HelloThere name="Component" />, document.getElementById('content')); Idenya adalah bahwa kami tidak memiliki stylesheet secara global dengan cara kami menggunakan CSS. Kami menyatakan stylesheet langsung di tingkat komponen, sehingga kami memiliki semua informasi yang kami perlukan untuk melihat apa yang dilakukan oleh komponen kami, tata letak yang dibuat, dan gaya yang diterapkan.
import React from ‘react';
import {Text} from ‘react-native';
var Headline = function(props) {
this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>;
};
var headlineStyles = StyleSheet.create({
text: {
fontSize: 32,
fontWeight: 'bold'
}
});
module.exports = Headline;
Step 4: Handling Events
Setara dengan mengklik di halaman web mengetuk elemen pada perangkat seluler. Mari kita ubah kode kita sehingga "peringatan" muncul ketika kita mengetuk elemen.import React from ‘react';
import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native';
class HelloThere extends React.Component {
clickMe() {
Alert.alert("Hi!")
}
render() {
return (
<TouchableOpacity onPress={this.clickMe()}>
<View style={styles.box}>
<Text>Hello {this.props.name}. Please click me.</Text>
</View>
</TouchableOpacity>
);
}
}
var styles = StyleSheet.create({
box: {
borderColor: 'red',
backgroundColor: '#fff',
borderWidth: 1,
padding: 10,
width: 100,
height: 100
}
});
React.render(<HelloThere name="Component" />, document.getElementById('content')); Step 5: Customize Behavior Across Platforms
Dimungkinkan untuk mendeteksi platform mana aplikasi React Native sedang berjalan, dengan mengakses nilai Platform.OS. Katakanlah, dalam contoh di atas, kami ingin menampilkan pesan peringatan yang berbeda berdasarkan platform tempat kami beroperasi. Kita bisa melakukannya seperti ini:...
clickMe() {
var message = ‘';
if(Platform.OS == ‘ios') {
message = ‘Welcome to iOS!';
} else if(Platform.OS == ‘android') {
message = ‘Welcome to Android!';
}
Alert.alert(message);
}
...
select method is also available, which provides a switch-like syntax:…
clickMe() {
Alert.alert(Platform.select({
ios: ‘Welcome to iOS!',
android: ‘Welcome to Android!'
})
);
}
...
Step 6: Custom Fonts and react-native link
Untuk menambahkan font kustom, kita perlu melompat melalui beberapa lingkaran. Pertama-tama, pastikan bahwa nama lengkap font dan nama file font adalah sama: iOS akan menggunakan nama lengkap font untuk memilih font naik, sementara Android menggunakan nama file.Jadi, jika nama lengkap font Anda adalah myCustomFont, pastikan nama file font adalah myCustomFont.ttf.
Setelah itu, kita perlu membuat folder aset dan menunjuk npm ke sana. Kita dapat melakukannya dengan membuat folder terlebih dahulu, di bawah aset / font di direktori root aplikasi. Direktori lainnya akan melakukan, tetapi ini adalah nama konvensional yang digunakan untuk direktori font.
Kami dapat memberi tahu npm tempat kami memiliki aset kami dengan menambahkan properti Aset di bagian integrasi npm React, rnpm:
"rnpm": {
"Assets": [
"./assets/fonts/"
]
} Setelah selesai, kita dapat menggunakan font kami hanya dengan mereferensikannya dalam stylesheet apa pun dengan nama lengkapnya. Mari gunakan pada elemen Teks kami:
import React from ‘react';
import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native';
class HelloThere extends React.Component {
clickMe() {
Alert.alert("Hi!")
}
render() {
return (
<TouchableOpacity onPress={this.clickMe()}>
<View style={styles.box}>
<Text style={styles.message}>Hello {this.props.name}. Please click me.</Text>
</View>
</TouchableOpacity>
);
}
}
var styles = StyleSheet.create({
box: {
borderColor: 'red',
backgroundColor: '#fff',
borderWidth: 1,
padding: 10,
width: 100,
height: 100
},
message: {
fontFamily: 'myCustomFont'
}
});
React.render(<HelloThere name="Component" />, document.getElementById('content'));
Step 7: Moving Things Around
Bereaksi Asli menggunakan aturan yang sama seperti Flexbox untuk meletakkan komponen. Katakanlah kami ingin memposisikan tombol kami di bagian bawah layar: mari kita membungkus TouchableOpacity kami dengan penampung Lihat:<View style={styles.container}>
<TouchableOpacity onPress={this.clickMe.bind(this)}>
<View style={styles.box}>
<Text style={styles.message}>Hello {this.props.name}. Please click me.</Text>
</View>
</TouchableOpacity>
</View>
container style, together with the other already defined styles:container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
} justifyContent memiliki enam kemungkinan nilai yang dapat disetel ke:
flex-start akan memposisikan semua elemen bersama-sama, di awal kotak bounding komponen.flex-end akan memposisikan semua elemen di bagian akhir.center akan menempatkan semua elemen di tengah kotak pembatas.space-around akan menyebarkan komponen secara merata, dan akan memusatkan komponen dalam kotak batas yang dibuat.ruang-merata akan menyebar komponen secara merata juga, tetapi akan mencoba untuk meninggalkan jumlah ruang yang sama antara komponen dan batas-batas lainnya.ruang-antara akan menyebar komponen dengan menjaga jarak antara komponen yang berdekatan sama.
Jadi, karena kami ingin TouchableOpacity kami ditampilkan di bagian bawah dan berpusat di sepanjang sumbu horizontal, kami dapat mengubah gaya seperti ini:
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
} Step 8: Registering the Application
Saat mengembangkan dengan React untuk browser, kita hanya perlu menentukan titik mount, memanggil React.render, dan membiarkan React melakukan sihirnya. Dalam React Native, ini sedikit berbeda.import React from ‘react';
import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from ‘react-native';
class HelloThere extends React.Component {
clickMe() {
Alert.alert(Platform.select({
ios: ‘Welcome to iOS!',
android: ‘Welcome to Android!'
}));
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.clickMe.bind(this)}>
<View style={styles.box}>
<Text style={styles.message}>Hello {this.props.name}. Please click me.</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center'
},
box: {
borderColor: 'red',
backgroundColor: '#fff',
borderWidth: 1,
padding: 10,
width: 100,
height: 100
},
message: {
fontFamily: 'myCustomFont'
}
});
var MainComponent = function() {
this.render = function() {
return <HelloThere name="Component" />;
}
};
AppRegistry.registerComponent('MainComponent', function() {
return MainComponent;
}); Aplikasi Hello World React Native kami secara signifikan memiliki lebih banyak baris kode daripada mitra webnya, tetapi di sisi lain, React Native mengambil pemisahan kekhawatiran sedikit lebih jauh, terutama karena style didefinisikan dengan komponen.
Sebagai catatan tambahan, kita tidak boleh mengulang metode clickMe ke konteks ini dalam metode render, terutama jika aplikasi React (Native) kami tumbuh menjadi sedikit lebih kompleks. Ini rebinds metode pada setiap panggilan membuat yang dapat menjadi cukup banyak. Alternatifnya adalah untuk mengikat metode di dalam konstruktor.
Running the Application
Untuk menjalankan aplikasi, kita perlu mengganti isi file index.ios.js dengan potongan kode dari aplikasi kami yang diubah dari langkah terakhir. Maka kita hanya perlu membuka proyek Xcode dan tekan tombol Run besar. Pertama, terminal akan terbuka dengan server React Native, dan kemudian jendela simulator akan muncul. Server React Native membuat paket, yang kemudian akan diambil aplikasi asli. Hal ini memungkinkan untuk siklus pengembangan cepat seperti pengembangan web, di mana perubahan akan tercermin hampir seketika di simulator.Untuk Android, cukup tambahkan hal berikut ke file package.json Anda, di bawah skrip:
"android-linux": "bereaksi-bundel asli --platform android --dev palsu --entry-file index.ios.js --bundle-output android / app / src / main / assets / index.android.bundle - -assets-dest android / app / src /
main / res & & re-native run-android "
Dan kemudian jalankan npm jalankan android-linux. Pastikan direktori android / app / src / main / assets ada sebelumnya.
Setelah terminal muncul, aplikasi kita akan muncul di simulator. Menekan CMD + D akan menampilkan menu pengembangan. Mengklik kotak itu akan menampilkan peringatan. Versi iOS:
Dan Android menerjemahkan sesuatu seperti ini:
Untuk distribusi, memiliki aplikasi yang menunjuk ke server pengembangan lokal tidak akan bekerja untuk kami. Untuk alasan ini, kita dapat membuat bundel untuk penggunaan ketika server React Native tidak berjalan dengan bundel asli perintah perintah. Dalam hal ini, kita perlu memperbarui metode didFinishLaunchingWithOptions dari AppDelegate untuk menggunakan bundel offline.
Aplikasi contoh ini juga tersedia di Github.
Working with React Native
Hal lain yang layak disebutkan adalah bahwa kami tidak hanya menggunakan konsep React dan JavaScript untuk aplikasi mobile kami, tetapi beberapa alur kerja yang digunakan pengembang web juga tersedia dengan React Native. Ketika berasal dari pengembangan web, kami digunakan untuk alat pengembang, memeriksa elemen, dan memuat ulang langsung.Cara React Native works adalah menempatkan semua file JavaScript kami dalam satu bundel. Bundel ini dilayani dari server atau dikelompokkan bersama dengan aplikasi. Yang pertama sangat berguna untuk pengembangan di Simulator, karena kami dapat mengaktifkan reload langsung. Menu pengembang React menyediakan sama sekali tidak sama perkasanya dengan Alat Pengembang Chrome, tetapi menyediakan pengalaman pengembang yang sangat mirip web dengan reload langsung dan debugging dengan alat pengembang / debugger Chrome (atau Safari).
Pengembang web akrab dengan JSFiddle atau JSBin, taman bermain online untuk tes web cepat. Ada lingkungan serupa yang memungkinkan kita untuk mencoba React Native di browser web.
React Native: A Solid, Modern Choice
Saya awalnya menyarankan pendekatan yang lebih hati-hati untuk Bereaksi Bawaan. Hari ini, ini adalah pilihan yang matang dan solid.Salah satu keuntungan besar dengan React adalah bahwa hal itu tidak memaksakan alur kerja Anda, karena hanya mewakili lapisan tampilan. Apakah Anda ingin mendefinisikan saluran Grunt Anda sendiri? Atau lebih suka menggunakan Webpack? Dan apakah Anda akan menggunakan Backbone.js untuk kebutuhan model Anda? Atau apakah Anda ingin pergi dengan objek JavaScript biasa? Jawaban atas semua pertanyaan ini sepenuhnya terserah Anda, karena React tidak memberi batasan pada pilihan-pilihan ini. Seperti yang dikatakan oleh situs resmi: “Karena React tidak membuat asumsi tentang sisa tumpukan teknologi Anda, mudah untuk mencobanya pada fitur kecil dalam proyek yang sudah ada.”
Untuk tingkat tertentu, ini juga berlaku untuk React Native. Pengembang mobile dapat mengintegrasikan React Native sebagai bagian dari aplikasi mereka, mengambil keuntungan dari alur kerja pengembangan yang terinspirasi web, dan memilih untuk mengintegrasikan perpustakaan dalam skala yang lebih besar jika diperlukan.
Bagaimanapun, ada satu hal yang pasti: React Native tidak akan pergi. Facebook memiliki saham besar di dalamnya yang memiliki beberapa aplikasi React Native-powered di toko aplikasi. Komunitas sekitar React Native sangat besar dan terus berkembang.
sumber: https://www.toptal.com/react-native/cold-dive-into-react-native-a-beginners-tutorial
0 comments:
Post a Comment