Advertisement
  1. Code
  2. Web Development

Intro ke Kerangka React

Scroll to top
Read Time: 16 min

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Dalam dunia kerangka Aplikasi Javascript saat ini, filosofi desain adalah faktor pembeda utama. Jika Anda membandingkan kerangka JS populer, seperti EmberJS, AngularJS, Backbone, Knockout, dll. Anda pasti akan menemukan perbedaan dalam abstraksi, model pemikiran, dan tentu saja terminologinya. Ini adalah konsekuensi langsung dari filosofi desain yang mendasarinya. Tapi, pada prinsipnya, mereka semua melakukan satu hal, yaitu untuk mengabstraksi DOM sedemikian rupa sehingga Anda tidak berhubungan langsung dengan Elemen HTML.

Saya pribadi berpikir bahwa kerangka menjadi menarik ketika itu menyediakan seperangkat abstraksi yang mengaktifkan modus yang berbeda pemikiran. Dalam aspek ini, bereaksi, kerangka JS baru dari orang-orang di Facebook, akan memaksa Anda untuk memikirkan kembali (sampai batas tertentu) bagaimana Anda menguraikan UI dan interaksi aplikasi Anda. Setelah mencapai versi 0.4.1 (pada tulisan ini), React menyediakan model yang sangat sederhana namun efektif untuk membuat aplikasi JS yang mencampurkan koktail menyenangkan dari jenis yang berbeda.

Dalam artikel ini, kita akan menjelajahi blok pembangun React dan merangkul gaya berpikir yang mungkin tampak berlawanan dengan intuisi pada langkah pertama. Tapi, seperti yang dikatakan oleh React docs: "Beri Lima Menit" dan kemudian Anda akan melihat bagaimana pendekatan ini akan menjadi lebih alami.

Motivasi

Kisah React dimulai dalam batasan Facebook, di mana ia diseduh untuk sementara waktu. Setelah mencapai keadaan stabil-cukup, pengembang memutuskan untuk open source itu beberapa bulan yang lalu. Menariknya situs web Instagram juga didukung oleh React Framework.

Bereaksi mendekati masalah abstraksi DOM dengan pengambilan yang sedikit berbeda. Untuk memahami bagaimana hal ini berbeda, mari kita cepat menghapus teknik yang diadopsi oleh kerangka kerja yang saya sebutkan sebelumnya.

Tinjauan Tingkat Tinggi tentang Kerangka Kerja Aplikasi JS

Pola desain MVC (Model-View-Controller) sangat penting untuk pengembangan UI, tidak hanya di aplikasi web, tetapi di aplikasi front-end pada platform apa pun. Dalam hal aplikasi web, DOM adalah representasi fisik dari suatu View. DOM itu sendiri dihasilkan dari html-template tekstual yang ditarik dari file yang berbeda, skrip-blok atau fungsi template dikompilasi. The View adalah entitas yang membawa template tekstual untuk hidup sebagai fragmen DOM. Ini juga mengatur penanganan-event dan menangani manipulasi pohon DOM sebagai bagian dari siklus hidupnya.

Agar View bermanfaat, perlu menunjukkan beberapa data, dan mungkin memungkinkan interaksi pengguna. Data adalah Model, yang berasal dari beberapa sumber data (database, layanan web, penyimpanan lokal, dll.). Kerangka kerja menyediakan cara "mengikat" data ke tampilan, sehingga perubahan data secara otomatis tercermin dengan perubahan pada tampilan. Proses otomatis ini disebut pengikatan data dan ada API / teknik untuk menjadikan ini semulus mungkin.

Triad MVC dilengkapi oleh Controller, yang melibatkan View dan Model dan mengatur aliran data (Model) ke dalam View dan peristiwa pengguna keluar dari View, kemungkinan mengarah pada perubahan dalam Model.

mvc-flowmvc-flowmvc-flow

Kerangka kerja yang secara otomatis menangani aliran data bolak-balik antara View dan Model mempertahankan loop peristiwa internal. Peristiwa-loop ini diperlukan untuk mendengarkan peristiwa pengguna tertentu, peristiwa perubahan data, pemicu eksternal, dll dan kemudian menentukan apakah ada perubahan dari sebelumnya menjalankan loop. Jika ada perubahan, pada salah satu ujung (Lihat atau Model), kerangka kerja memastikan bahwa keduanya dibawa kembali dalam sinkronisasi.

Apa yang Bereaksi Beda?

Dengan React, View-bagian dari MVC triad menjadi terkenal dan digulirkan ke dalam entitas yang disebut Komponen. Komponen mempertahankan tas properti yang tidak berubah yang disebut alat peraga, dan keadaan yang mewakili keadaan pengguna yang digerakkan oleh pengguna. Bagian pandangan-generasi dari Komponen agak menarik dan mungkin alasan yang membuat React menonjol dibandingkan dengan kerangka lain. Alih-alih membangun DOM fisik langsung dari file template / skrip/fungsi, Komponen menghasilkan DOM perantara yang merupakan stand-in untuk DOM HTML yang sebenarnya. Langkah tambahan selanjutnya diambil untuk menerjemahkan DOM perantara ini ke dalam DOM HTML yang sebenarnya.

Sebagai bagian dari generasi DOM perantara, Komponen juga melampirkan penangan kejadian dan mengikat data yang terdapat dalam alat peraga dan status.

Jika ide dari DOM menengah terdengar sedikit asing, jangan terlalu khawatir. Anda telah melihat strategi ini diadopsi oleh runtimes bahasa (alias Mesin Virtual) untuk bahasa yang ditafsirkan. Runtime JavaScript kami sendiri, yang pertama menghasilkan representasi antara sebelum memuntahkan kode asli. Ini juga berlaku untuk bahasa berbasis VM lainnya seperti Java, C #, Ruby, Python, dll.

Bereaksi dengan cerdik mengadopsi strategi ini untuk membuat DOM perantara sebelum menghasilkan DOM HTML final. DOM menengah hanya berupa grafik objek JavaScript dan tidak dirender secara langsung. Ada langkah terjemahan yang menciptakan DOM asli. Ini adalah teknik dasar yang membuat React melakukan manipulasi DOM dengan cepat.

Bereaksi Dalam Kedalaman

Untuk mendapatkan gambaran yang lebih baik tentang cara React membuat semuanya berfungsi, mari selami sedikit lebih dalam; dimulai dengan Komponen. Komponen adalah blok bangunan utama dalam React. Anda dapat menyusun UI aplikasi Anda dengan mengumpulkan pohon Komponen. Setiap Komponen menyediakan implementasi untuk metode render(), di mana ia menciptakan DOM menengah. Memanggil React.renderComponent() pada root Komponen menghasilkan secara berurutan menurunkan Component-tree dan membangun intermediate-DOM. DOM menengah kemudian diubah menjadi DOM HTML asli.

component-dom-treecomponent-dom-treecomponent-dom-tree

Karena pembuatan DOM menengah merupakan bagian integral dari Komponen, React menyediakan ekstensi berbasis XML yang mudah digunakan untuk JavaScript, yang disebut JSX, untuk membangun pohon komponen sebagai sekumpulan node XML. Ini membuatnya lebih mudah untuk memvisualisasikan dan bernalar tentang DOM. JSX juga menyederhanakan asosiasi event-handler dan properti sebagai atribut xml. Karena JSX adalah bahasa ekstensi, ada alat (baris perintah dan di-browser) untuk menghasilkan JavaScript akhir. Sebuah node XML JSX memetakan langsung ke Komponen. Perlu diketahui bahwa React bekerja independen dari JSX dan bahasa JSX hanya mempermudah pembuatan DOM perantara.

Tooling

Kerangka inti React dapat diunduh dari situs web mereka. Selain itu, untuk transformasi JSX → JS, Anda dapat menggunakan JSXTransformer di-browser atau menggunakan alat baris perintah, yang disebut react-tools (diinstal melalui NPM). Anda perlu menginstal Node.js untuk mengunduhnya. Alat baris perintah memungkinkan Anda mengkompilasi file JSX dan menghindari terjemahan dalam browser. Ini pasti direkomendasikan jika file JSX Anda besar atau banyak jumlahnya.

Komponen Sederhana

Baiklah, kita telah melihat banyak teori sejauh ini, dan saya yakin Anda gatal untuk melihat beberapa kode nyata. Mari selami contoh pertama kita:

Meskipun sederhana, kode di atas tidak mencakup jumlah luas permukaan React yang baik:

  • Kita membuat komponen sederhana dengan menggunakan React.createClass dan meneruskan objek yang mengimplementasikan beberapa fungsi inti. Yang paling penting adalah render(), yang menghasilkan DOM menengah.
  • Di sini kita menggunakan JSX untuk menentukan DOM dan juga melampirkan event-handler mousedown. Sintaks {} berguna untuk menggabungkan ekspresi JavaScript untuk atribut (onMouseDown={this.handleClick}) dan child-nodes (<span class="count'> {this.state.count}</span>). Penangan acara yang terkait menggunakan {} sintaks secara otomatis terikat ke instance komponen. Jadi ini di dalam fungsi event-handler mengacu pada contoh komponen. Komentar di baris pertama /** @jsx React.DOM */ adalah isyarat untuk transformator BEJ untuk melakukan penerjemahan ke JS. Tanpa baris komentar ini, tidak ada terjemahan yang akan terjadi.

Kita dapat menjalankan line tool perintah (jsx) dalam mode tontonan dan perubahan kompilasi otomatis dari JSX → JS. File sumber berada di folder / src dan output dihasilkan di / build.

Berikut file JS yang dihasilkan:

Perhatikan bagaimana tag <div/> dan <span/> memetakan ke intance React.DOM.div dan React.DOM.span.

  • Sekarang mari kita kembali ke contoh kode kita. Di dalam handleMouseDown, kami menggunakan this.props untuk membaca properti pesan yang diteruskan. Kita mengatur pesan pada baris terakhir dari potongan, dalam panggilan ke React.renderComponent() dimana kita membuat <Simple/> komponen. Tujuan this.props adalah untuk menyimpan data yang diteruskan ke komponen. Hal ini dianggap tidak dapat diubah dan hanya komponen tingkat yang lebih tinggi yang diperbolehkan untuk melakukan perubahan dan meneruskannya ke pohon komponen.
  • Di dalam handleMouseDown kita juga mengatur beberapa negara pengguna dengan this.setState() untuk melacak berapa kali pesan ditampilkan. Anda akan melihat bahwa kita menggunakan this.state dalam metode render(). Setiap kali Anda memanggil setState(), React juga memicu metode render() untuk menjaga DOM tetap sinkron. Selain React.renderComponent(), setState() adalah cara lain untuk memaksa visual refresh.

Acara Sintetis

Peristiwa yang terekspos pada DOM menengah, seperti onMouseDown, juga bertindak sebagai lapisan tipuan sebelum mereka ditetapkan pada DOM asli. Kejadian-kejadian ini dengan demikian disebut sebagai Peristiwa Sintetis. React mengadopsi acara-delegasi, yang merupakan teknik yang terkenal, dan hanya melampirkan peristiwa di tingkat akar DOM asli. Dengan demikian hanya ada satu event-handler sejati di DOM asli. Selain itu, peristiwa sintetis ini juga memberikan tingkat konsistensi dengan menyembunyikan browser dan perbedaan elemen.

Kombinasi acara antara-DOM dan sintetis memberi Anda cara standar dan konsisten mendefinisikan UI di berbagai browser dan bahkan perangkat.

Siklus Hidup Komponen

Komponen dalam kerangka React memiliki siklus hidup spesifik dan mewujudkan mesin negara yang memiliki tiga kondisi berbeda.

component-lifecyclecomponent-lifecyclecomponent-lifecycle

Komponen menjadi hidup setelah Dipasang. Memasang hasil dalam melewati render-pass yang menghasilkan pohon komponen (menengah-DOM). Pohon ini diubah dan ditempatkan ke dalam wadah-node dari DOM asli. Ini adalah hasil yang langsung panggilan untuk React.renderComponent().

Setelah dipasang, komponen tetap dalam status Pembaruan. Komponen akan diperbarui ketika Anda mengubah status menggunakan setState() atau mengubah properti menggunakan setProps(). Ini pada gilirannya menghasilkan panggilan render(), yang membawa DOM dalam sinkron dengan data (properti + negara). Di antara pembaruan berikutnya, Bereaksi akan menghitung delta antara pohon komponen sebelumnya dan pohon yang baru dibuat. Ini adalah langkah yang sangat dioptimalkan (dan fitur unggulan) yang meminimalkan manipulasi pada DOM asli.

Keadaan akhir adalah Unmounted. Ini terjadi ketika Anda secara eksplisit memanggil React.unmountAndReleaseReactRootNode() atau secara otomatis jika komponen adalah anak yang tidak lagi dihasilkan dalam render() panggilan. Paling sering Anda tidak perlu berurusan dengan ini dan biarkan saja React melakukan hal yang tepat.

Sekarang itu akan menjadi lalai besar, jika React tidak memberi tahu Anda ketika itu bergerak di antara bagian Mounted-Update-Unmounted. Untungnya itu tidak terjadi dan ada kait yang bisa Anda ganti untuk mendapatkan pemberitahuan perubahan siklus hidup. Nama-nama berbicara sendiri:

  • getInitialState(): siapkan keadaan awal Komponen
  • componentWillMount()
  • componentDidMount()
  • componentWillReceiveProps()
  • shouldComponentUpdate(): berguna jika Anda ingin mengontrol kapan render harus dilewati.
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
  • componentWillUnmount()

Metode componentWill* dipanggil sebelum perubahan status dan metode componentDid* dipanggil sesudahnya.

Beberapa nama metode tampaknya telah mengambil isyarat dari kerangka Cocoa di Mac dan iOS

Miscellaneous fitur

Di dalam bagan komponen, data harus selalu mengalir ke bawah. Komponen induk harus mengatur props komponen anak untuk meneruskan data apa pun dari induk ke anak. Ini disebut sebagai pasangan Owner-Owned. Di sisi lain, peristiwa pengguna (mouse, keyboard, sentuhan) akan selalu meluap dari anak sampai ke komponen root, kecuali ditangani di antara keduanya.

data-event-flowdata-event-flowdata-event-flow

Saat Anda membuat DOM menengah di render(), Anda juga dapat menetapkan properti ref ke komponen anak. Anda kemudian dapat merujuknya dari induk menggunakan properti refs. Ini digambarkan dalam potongan di bawah ini.

Sebagai bagian dari metadata komponen, Anda dapat mengatur awal-negara (getInitialState ()), yang kita lihat sebelumnya dalam metode siklus hidup. Anda juga dapat mengatur nilai default dari alat peraga dengan getDefaultProps() dan juga menetapkan beberapa aturan validasi pada alat peraga ini menggunakan propTypes. Dokumen memberikan gambaran bagus tentang berbagai jenis validasi (jenis pemeriksaan, diperlukan, dll.) Yang dapat Anda lakukan.

Bereaksi juga mendukung konsep Mixin untuk mengekstrak potongan perilaku yang dapat digunakan kembali yang dapat disuntikkan ke dalam Komponen yang berbeda. Anda dapat melewatkan mix-mix menggunakan properti mixins dari Component.

Sekarang, mari kita menjadi nyata dan membangun Komponen yang lebih komprehensif yang menggunakan fitur ini.

Editor Bentuk Dibangun Menggunakan Bereaksi

Dalam contoh ini, kita akan membangun editor yang menerima DSL sederhana (Bahasa Khusus Domain) untuk membuat bentuk. Saat Anda mengetik, Anda akan melihat keluaran yang sesuai di samping, memberi Anda umpan balik langsung.

DSL memungkinkan Anda untuk membuat tiga jenis bentuk: Ellipse, Rectangle, dan Text. Setiap bentuk ditentukan pada garis terpisah bersama dengan sekelompok properti styling. Sintaksnya mudah dan meminjam sedikit dari CSS. Untuk menguraikan baris, kita menggunakan Regex yang terlihat seperti:

Sebagai contoh, rangkaian garis berikut menggambarkan dua persegi panjang dan label teks ...

...menghasilkan output yang ditunjukkan di bawah ini:

react-shapes

Pengaturan

Baiklah, ayo lanjutkan dan buat editor ini. Kita akan memulai dengan file HTML (index.html), tempat kita menempatkan markup tingkat atas dan menyertakan pustaka dan skrip aplikasi. Saya hanya menunjukkan bagian yang relevan di sini:

Dalam cuplikan di atas, div kontainer menyimpan DOM hasil reaksi kita. Aplikasi skrip kita termasuk dari direktori /build. Kita menggunakan JSX dalam komponen kita dan pengawas baris perintah (jsx), menempatkan file JS yang telah dikonversi ke dalam /build. Perhatikan bahwa perintah pengamat ini adalah bagian dari modul NPM reaksi-alat.

Editor dibagi menjadi beberapa komponen, yang tercantum di bawah ini:

  • ShapeEditor: Komponen root di pohon komponen
  • ShapeCanvas: bertanggung jawab untuk menghasilkan bentuk-Komponen (Ellipse, Rectangle, Text). Ini terkandung dalam ShapeEditor.
  • ShapeParser: bertanggung jawab untuk mengurai teks dan mengekstraksi daftar definisi bentuk. Ini mem-parsing baris demi baris dengan Regex yang kita lihat sebelumnya. Baris tidak valid diabaikan. Ini bukan benar-benar sebuah komponen, tetapi objek JS pembantu, yang digunakan oleh ShapeEditor.
  • Ellipse, Rectangle, Teks: Komponen bentuk. Ini menjadi anakan dari ShapeCanvas.
  • ShapePropertyMixin: menyediakan fungsi pembantu untuk mengekstraksi gaya yang ditemukan dalam definisi bentuk. Ini dicampur ke dalam tiga bentuk-Komponen menggunakan properti mixins.
  • app: entry-point untuk editor. Ini menghasilkan komponen root (ShapeEditor) dan memungkinkan Anda untuk mengambil sampel bentuk dari drop-down.

Hubungan entitas ini ditampilkan dalam pohon beranotasi komponen:

component-treecomponent-treecomponent-tree

Komponen ShapeEditor

Mari kita lihat penerapan beberapa komponen ini, dimulai dengan ShapeEditor.

Seperti namanya, ShapeEditor menyediakan pengalaman pengeditan dengan menghasilkan <textarea/> dan umpan balik langsung <ShapeCanvas/<. Ini mendengarkan acara onChange (acara di React selalu dinamai dengan kasus camel) pada <textarea /> dan pada setiap perubahan mengatur properti teks dari status komponen. Seperti disebutkan sebelumnya, setiap kali Anda mengatur negara menggunakan setState(), render dipanggil secara otomatis. Dalam hal ini, render() dari ShapeEditor dipanggil di mana kita mengurai teks dari bagian dan membangun kembali bentuk. Perhatikan bahwa kita memulai dengan keadaan awal teks kosong, yang diatur dalam hook getInitialState().

Untuk mengurai teks menjadi satu set bentuk, Kita menggunakan turunan dari ShapeParser. Saya telah meninggalkan rincian parser untuk menjaga diskusi tetap fokus pada React. Instance parser dibuat di hook componentWillMount(). Ini disebut tepat sebelum mount komponen dan merupakan tempat yang baik untuk melakukan inisialisasi sebelum render pertama terjadi.

Umumnya disarankan agar Anda menyalurkan semua pemrosesan kompleks Anda melalui metode render(). Penangan acara hanya mengatur keadaan saat render() adalah pusat untuk semua logika inti Anda.

ShapeEditor menggunakan ide ini untuk melakukan parsing di dalam render() dan meneruskan bentuk yang terdeteksi dengan mengatur properti bentuk ShapeCanvas. Ini adalah bagaimana data mengalir turun ke dalam pohon komponen, dari pemilik (ShapeEditor) ke yang dimiliki (ShapeCanvas).

Satu hal terakhir yang perlu diperhatikan di sini adalah kita memiliki komentar baris pertama untuk menunjukkan terjemahan JSX → JS.

ShapeCanvas untuk Menghasilkan Bentuk

Selanjutnya, kita akan beralih ke komponen ShapeCanvas dan Ellipse, Rectangle and Text.

p> ShapeCanvas lebih sederhana dengan tanggung jawab utamanya menghasilkan masing-masing <Ellipse/> , <Rectangle/> dan <Text/> komponen dari definisi yang dilewati dalam bentuk (this.props.shapes). Untuk setiap bentuk, kita meneruskan properti parsing dengan ekspresi atribut: properties={shape.properties}.

Satu hal yang berbeda di sini adalah bahwa pohon komponen kita tidak statis, seperti yang kita miliki di ShapeEditor. Sebaliknya itu secara dinamis dihasilkan oleh perulangan atas yang dilewati dalam bentuk. Kita juga menunjukkan pesan "No Shapes Found" jika tidak ada yang ditampilkan.

Bentuk: Ellipse, Rectangle, Text

Semua bentuk memiliki struktur yang serupa dan hanya berbeda dalam gaya. Mereka juga menggunakan ShapePropertyMixin untuk menangani generasi gaya.

Berikut adalah Ellipse:

Implementasi untuk extractStyle() disediakan oleh ShapePropertyMixin.

Komponen Rectangle berikut sesuai, tentu saja tanpa gaya border-radius. Komponen Text memiliki value properti tambahan yang disebut yang menetapkan teks bagian dalam untuk <div/>.

Ini Teks, untuk memperjelas ini:

Mengikatnya Semua Bersama Dengan App.js

app.js adalah tempat kita menyatukan semuanya. Di sini kita membuat komponen root, ShapeEditor dan juga menyediakan dukungan untuk beralih di antara beberapa bentuk sampel. Ketika Anda memilih sampel yang berbeda dari drop down, kita memuat beberapa teks yang telah ditentukan ke ShapeEditor dan menyebabkan ShapeCanvas untuk memperbarui. Ini terjadi dalam metode readShapes().

Untuk melatih sisi kreatif, di sini adalah robot yang dibangun menggunakan Editor Bentuk:

robot

Dan Itu Bereaksi untuk Anda!

Fuih! Ini adalah artikel yang agak panjang dan setelah mencapai titik ini, Anda harus memiliki rasa pencapaian!

Kita telah menjelajahi banyak konsep di sini: peran integral dari Komponen dalam kerangka kerja, penggunaan JSX untuk dengan mudah menggambarkan pohon komponen (alias menengah-DOM), berbagai pengait untuk dicolokkan ke dalam lifecyle komponen, penggunaan status dan alat untuk mengemudi proses render, penggunaan Mixins untuk faktor perilaku yang dapat digunakan kembali dan akhirnya menarik semua ini bersama dengan contoh Shape Editor.

Saya harap artikel ini memberi Anda cukup dorongan untuk membuat beberapa aplikasi Bereaksi untuk diri Anda sendiri. Untuk melanjutkan eksplorasi Anda, berikut beberapa tautan praktis:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.