React.js adalah fleksibel dan berbasis komponen Perpustakaan JavaScript untuk membangun antarmuka pengguna interaktif. Dulu dibuat dan bersumber terbuka oleh Facebook dan digunakan oleh banyak perusahaan teknologi terkemuka seperti Dropbox, AirBnB, PayPal, dan Netflix. Bereaksi memungkinkan pengembang untuk membuat aplikasi data-berat yang dapat diperbarui tanpa rasa sakit oleh rendering ulang hanya komponen yang diperlukan.
Bereaksi adalah Lihat lapisan dari MVC pola desain perangkat lunak, dan itu terutama berfokus pada manipulasi DOM. Karena hari ini semua orang berbicara tentang Bereaksi, dalam posting ini kami melihat bagaimana Anda bisa mulai dengan itu.
Instal Bereaksi
Anda dapat menginstal Bereaksi baik dengan manajer paket npm atau oleh menambahkan perpustakaan yang diperlukan secara manual ke halaman HTML Anda. Dianjurkan menggunakan Bereaksi dengan Babel yang memungkinkan Anda untuk gunakan sintaks ECMAScript6 dan JSX dalam kode Bereaksi Anda.
Jika Anda menghendaki instal Bereaksi secara manual, rekomendasi dokumen resmi untuk gunakan file HTML ini. Anda dapat mengunduh halaman dengan mengklik File> Simpan Halaman Sebagai ... menu di browser Anda. Skrip yang Anda perlukan (Bereaksi, Bereaksi DOM, Babel) juga akan diunduh ke dalam reaksi-example_files / map. Kemudian, tambahkan tag skrip berikut ke bagian dari dokumen HTML Anda:
Alih-alih mengunduhnya, Anda dapat menambahkan skrip Bereaksi dari CDN demikian juga.
Anda juga dapat menggunakan versi yang diperkecil dari file JavaScript di atas:
Jika Anda lebih suka instal Bereaksi dengan npm, cara terbaik adalah menggunakan Buat Aplikasi Bereaksi Repo Github dibuat oleh Facebook Incubator - ini juga solusi yang direkomendasikan Bereaksi dokumen. Selain Bereaksi, itu juga berisi Webpack, Babel, Autoprefixer, ESLint, dan alat pengembang lainnya. Untuk memulai, gunakan perintah CLI berikut:
npm instal -g buat-reaksi-aplikasi buat-reaksi-aplikasi saya-cd aplikasi-saya mulai npm
Ketika Anda siap, Anda bisa akses aplikasi Bereaksi baru Anda di localhost: 3000 URL:
Jika Anda ingin membaca lebih lanjut cara menginstal Bereaksi, lihat pedoman instalasi dari dokumen.
Bereaksi dan BEJ
Meskipun tidak wajib, Anda bisa gunakan sintaks JSX di aplikasi Bereaksi Anda. JSX adalah singkatan dari XML JavaScript, dan itu transpiles menjadi JavaScript biasa. Keuntungan besar dari JSX adalah itu memungkinkan Anda memasukkan HTML dalam file JavaScript Anda, karena itu membuat mendefinisikan elemen Bereaksi lebih mudah.
Berikut adalah hal-hal paling penting untuk diketahui tentang BEJ:
Tag itu mulai dengan huruf kecil (case unta bawah) diberikan sebagai elemen HTML biasa.
Tag itu mulai dengan huruf besar (case unta atas) ditampilkan sebagai komponen Bereaksi.
Kode apa saja ditulis dalam kurung kurawal ... ditafsirkan sebagai JavaScript literal.
Jika Anda ingin tahu lebih banyak tentang cara menggunakan JSX dengan Bereaksi lihat halaman ini dari dokumen, dan untuk dokumentasi JSX standar Anda dapat melihat wiki JSX.
Buat elemen Bereaksi
Bereaksi memiliki arsitektur berbasis komponen di mana pengembang membuat komponen yang dapat digunakan kembali untuk menyelesaikan masalah yang berbeda. Komponen Bereaksi dibangun dari beberapa atau banyak Bereaksi elemen itu adalah unit terkecil dari aplikasi Bereaksi.
Di bawah, Anda bisa lihat contoh sederhana dari elemen Bereaksi yang menambahkan tombol Klik saya ke halaman HTML. Dalam HTML, kami menambahkan a
wadah dengan "myDiv" ID itu akan menjadi diisi dengan elemen Bereaksi. Kami membuat elemen Bereaksi kami dalam a
Kami memberikan elemen Bereaksi kami dengan ReactDOM.render () metode yang membutuhkan dua parameter yang diperlukan, itu Bereaksi elemen () dan wadahnya (document.getElementById ('myDiv')). Anda dapat membaca lebih lanjut tentang bagaimana Bereaksi elemen bekerja dalam “Elemen Penyajian” bagian dari dokumen.
Buat komponen
Bereaksi komponen adalah dapat digunakan kembali, unit UI independen di mana Anda dapat dengan mudah memperbarui data. Komponen dapat dibuat dari satu atau banyak elemen Bereaksi. Alat peraga adalah input sewenang-wenang Anda dapat menggunakan untuk meneruskan data ke suatu komponen. Komponen Bereaksi bekerja mirip dengan fungsi JavaScript-setiap kali itu dipanggil, itu menghasilkan semacam output.
Anda dapat menggunakan salah satu dari sintaks fungsi klasik atau yang baru Sintaks kelas ES6 untuk mendefinisikan komponen Bereaksi. Pada artikel ini, saya akan menggunakan yang terakhir, karena Babel memungkinkan kita untuk menggunakan ECMAScript 6. Jika Anda tertarik bagaimana cara membuat komponen tanpa ES6, lihat halaman Components and Props pada dokumen..
Di bawah, Anda dapat melihat komponen Bereaksi sederhana kita akan buat sebagai contoh. Ini adalah pemberitahuan dasar yang dilihat pengguna setelah masuk ke situs. Ada tiga bagian data yang akan berubah dari kasus ke kasus: nama pengguna, jumlah pesan, dan jumlah pemberitahuan, kami akan meneruskannya sebagai alat peraga.
Setiap komponen Bereaksi adalah kelas JavaScript itu memperpanjang React.Component kelas dasar. Komponen kami akan dipanggil Statistik karena menyediakan pengguna dengan statistik dasar. Pertama kita buat Statistik kelas dengan Statistik kelas memperluas React.Component ... sintaks, maka kita render ke layar dengan memanggil ReactDOM.render () metode (kami sudah menggunakan yang terakhir di bagian sebelumnya).
Statistik kelas memperluas React.Component render () return (
Hai this.props.name, Anda memiliki this.props.notifications pemberitahuan baru dan this.props.messages pesan baru.
Argumen pertama dari ReactDOM.render () metode terdiri dari nama komponen Bereaksi kami (), dan alat peraga nya (nama, pemberitahuan, dan pesan) dengan nilai-nilai mereka. Ketika kita mendeklarasikan nilai-nilai alat peraga, string harus ada terlampir dalam tanda kutip (seperti "John Doe") dan nilai numerik dalam kurung keriting (seperti 3).
Perhatikan bahwa karena JavaScript, kami bekas nama kelas dari pada kelas untuk meneruskan atribut kelas ke tag HTML (className = "ringkasan").
Halaman HTML yang cocok adalah sebagai berikut:
Dalam dokumen Bereaksi, ada banyak contoh keren lainnya cara membangun & mengelola komponen Bereaksi, dan apa lagi yang perlu diketahui tentang alat peraga.
Bacaan lebih lanjut
Dengan Bereaksi, Facebook diperkenalkan jenis kerangka kerja baru dalam pengembangan front-end itu menantang pola desain MV *. Jika Anda ingin lebih memahami cara kerjanya dan apa yang dapat dan tidak dapat Anda capai dengan itu, berikut adalah beberapa artikel menarik yang dapat membantu:
Posting blog Facebook di mengapa mereka membangun Bereaksi.
Posting blog Andrew Ray yang brilian pada yang baik dan yang buruk dari Bereaksi.
Codementor aktif bagaimana React dan AngularJS membandingkan.
Sepotong FreeCodeCamp tentang apakah MVC mati di front-end.
Artikel HackerNoon di cara mengoptimalkan kinerja yang terkait Bereaksi.
