Tutorial React: Bagaimana Memulai dan Membandingkannya

Front-end dan JavaScript khususnya adalah dunia yang aneh. Banyaknya hal baru yang diluncurkan setiap hari sering diejek oleh orang-orang yang tidak bekerja dengannya, dan banyak yang melakukannya. Namun, terkadang, kami sedikit kewalahan dengan informasi, perpustakaan, dan diskusi baru, dan kami menginginkan sesuatu yang stabil, seperti tempat berlindung yang aman bagi kapal tempat kami dapat tinggal lebih lama. Akhir-akhir ini, React tampaknya menjadi pelabuhan yang patuh di lautan evolusi JavaScript yang dinamis.

Dengan mengingat hal itu, kami memutuskan untuk membuat tutorial React multi-bagian ini, untuk menunjukkan kemampuannya dan melihat bagaimana perbandingannya dengan Angular dan VueJS.

Tentu saja, React bukan satu-satunya pelabuhan yang dapat kita gunakan, tetapi saat ini, ini adalah salah satu solusi paling populer, stabil, dan inovatif, dan meskipun masih mendapatkan banyak peningkatan, itu lebih merupakan pilihan untuk perbaikan daripada dari kebutuhan untuk fungsi.

State of React di tahun 2019

React adalah perpustakaan tampilan yang dapat kita lacak kembali pada awal 2011, ketika prototipe pertamanya, yang disebut FaxJs, muncul di halaman Facebook-nya, React sendiri diperkenalkan oleh Jordan Walke (yang juga merupakan penulis prototipe yang disebutkan) di JSConfUS pada 29 Mei 2013, dan dibuat tersedia secara terbuka di GitHub pada 2 Juli 2013.

React terus mendapatkan popularitas pada tahun 2014, ketika konferensi mulai muncul untuk memperluas komunitas dan mempopulerkan React. Namun, dari sudut pandang saya, 2015 adalah tahun tonggak sejarah bagi React—perusahaan besar (misalnya, Airbnb dan Netflix) mulai menyukai dan mengadopsi solusi React. Juga, React Native muncul tahun itu. Ide di balik React Native bukanlah sesuatu yang benar-benar baru, tetapi menarik untuk ditonton, terutama karena didukung oleh Facebook.

Perubahan besar lainnya adalah Redux, implementasi Flux. Ini membuat cara pengelolaan negara menjadi lebih mudah didekati dan lebih mudah, menjadikannya implementasi yang paling sukses hingga saat ini.

Antara dulu dan sekarang, banyak hal lain yang tersedia, termasuk alat React, penulisan ulang algoritme inti, Fiber, perubahan versi semantik, dan sebagainya. Maju cepat ke hari ini, kita berada di 16.6.3, mungkin beberapa minggu sebelum versi baru dengan Hooks tersedia (seharusnya 16.7.0, tetapi yang itu sudah dirilis karena beberapa perbaikan untuk React.lazy). React terkenal dan stabil dan mendapatkan opini yang bagus.

Tapi Apa Itu Bereaksi?

Nah, jika Anda adalah pengembang front-end dan Anda belum pernah mendengarnya, maka saya harus mengucapkan selamat, karena itu adalah prestasi yang luar biasa.

Selain lelucon, React adalah pustaka tampilan berbasis komponen deklaratif yang membantu Anda membangun UI. Ini adalah perpustakaan, bukan kerangka kerja, meskipun pada awalnya, banyak orang menggambarkannya sebagai yang terakhir.

Jelas, jika kita akan menambahkan Redux, React Router, dan sebagainya, itu mulai memiliki semua hal yang diperlukan untuk membuat aplikasi satu halaman biasa, yang mungkin menjadi alasan mengapa kadang-kadang disalahartikan sebagai kerangka kerja daripada perpustakaan. . Jika ada, dapat dikatakan bahwa, dengan semua komponen lingkungan itu bersama-sama, istilah "kerangka kerja" agak cocok, tetapi dengan sendirinya, React hanyalah sebuah perpustakaan.

Mari berhenti dengan nomenklatur dan fokus pada apa yang berbeda di React, pada hal-hal yang tidak kita miliki sebelum peluncurannya. Pertama-tama, ketika Anda pertama kali berpikir tentang React, Anda berpikir tentang JSX, karena ini adalah hal pertama yang muncul di mata Anda ketika Anda melihat kodenya. JSX adalah ekstensi sintaks JavaScript yang agak menyerupai HTML/XML. Ketika datang ke React dan JSX, kami memiliki beberapa perbedaan dari HTML, misalnya, kelas di React adalah className , tidak ada tabindex selain tabIndex , gaya menerima objek JavaScript yang memiliki properti camelCased, dan seterusnya.

Ada beberapa perbedaan kecil, tetapi siapa pun harus mengambilnya dalam waktu singkat. Penanganan peristiwa melalui, misalnya, atribut onChange dan onClick yang dapat digunakan untuk melampirkan beberapa fungsi untuk menangani peristiwa. Selain itu, komponen nantinya dapat dengan bebas digunakan kembali dan disesuaikan dengan menggunakan alat peraga, jadi tidak ada alasan untuk menulis kode yang sama beberapa kali.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

Namun, JSX sebenarnya tidak mutlak diperlukan di React. Anda dapat menulis fungsi reguler untuk membuat elemen tanpa menggunakan JSX. Kode yang sama yang di atas, dapat digunakan seperti di bawah ini.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

Jelas, saya tidak menyarankan Anda menggunakan sintaks seperti itu, meskipun ada kasus di mana itu mungkin berguna (misalnya, Anda ingin memperkenalkan hal yang sangat kecil dan tidak ingin mengubah lingkungan build).

Sebenarnya, saya punya alasan lain mengapa saya menunjukkan cuplikan di atas. Seringkali, pengembang tidak mengerti mengapa kita perlu melakukan hal berikut:

 import React from 'react';

Cuplikan harus cukup jelas. Meskipun kita sedang mengekstrak Component , kita tetap membutuhkan React, karena Babel mentranspilasikan di atas JSX ke bawah React.createElement . Jadi, jika kita tidak mengimpor React, itu akan gagal untuk kita. Saya menyebutkan Babel, yang merupakan alat yang membantu kami memperkenalkan hal-hal yang belum ada di JavaScript (atau lebih tepatnya di browser) atau entah bagaimana merupakan ekstensi untuknya (atau bahasa yang berbeda seperti TypeScript, yang didukung Babel dari Babel 7). Terima kasih kepada Babel:

• BEJ akan dibuat menjadi fungsi-fungsi yang dimengerti oleh browser.
• Kita dapat menggunakan fitur baru yang belum ada di browser (mis., properti kelas).
• Kami dapat menambahkan fitur yang ada di browser yang lebih baru tetapi tidak ada di browser yang lebih lama sambil mempertahankan dukungan browser yang lebih lama.

Singkatnya, besok adalah hari ini dalam JavaScript; ini mungkin sesuatu yang membutuhkan artikelnya sendiri. Perlu disebutkan bahwa impor React juga dapat dilewati oleh beberapa teknik lain (seperti memperkenalkan ProvidePlugin melalui Webpack dan sebagainya), tetapi karena ruang terbatas di sini, kami akan menghindarinya dan menganggap bahwa pengguna akan menggunakan Create React App ( CRA) (lebih lanjut tentang alat ini akan disebutkan nanti).

Hal penting kedua, dan jauh lebih penting daripada JSX itu sendiri, adalah bahwa React didasarkan pada DOM virtual. Singkatnya, DOM virtual adalah memori dari pohon ideal yang diwakili oleh JavaScript yang ditulis oleh pengembang, yang kemudian dibandingkan dengan DOM nyata dan disinkronkan dengannya dalam proses yang disebut rekonsiliasi.

Bagaimana React Dibandingkan dengan Angular dan Vue?

Saya sangat tidak suka membandingkan perpustakaan, terutama ketika kita dipaksa untuk membandingkan pir dengan apel (perpustakaan vs kerangka kerja dan sebagainya).

Oleh karena itu, saya akan mencoba membandingkan React dengan Angular dan Vue menggunakan serangkaian pertanyaan dan jawaban singkat yang tidak banyak berhubungan dengan hal-hal teknis daripada mengatakan sesuatu seperti “X lebih baik daripada Y karena menggunakan JSX dan bukan template. ” Hal-hal seperti ini biasanya merupakan preferensi pribadi, pilihan subjektif seseorang. Juga kecepatan, alokasi memori, dll., sangat mirip di React dan semua pesaing utamanya (Angular dan Vue muncul dalam pikiran). Ada laporan yang sangat bagus tentang masalah ini, tetapi harap ingat ini: Sebagian besar aplikasi tidak terlihat seperti tabel yang sangat besar yang menukar baris dalam tabel 10k. Oleh karena itu, hasil ini juga merupakan eksperimen kecepatan murni. Di dunia nyata, Anda tidak akan melakukan hal seperti itu sejak awal.

Jadi mari kita lihat beberapa pertanyaan yang berkaitan dengan React dan bagaimana perbandingannya dengan kompetisi:

Saya ingin memiliki banyak kesempatan kerja. Seberapa populerkah React?

Nah, itu jawaban yang mudah—pilih React. Sebenarnya, saya akan mengatakan bahwa React memiliki kira-kira 6-10 kali (penyebaran yang cukup besar, tetapi ada beberapa portal di mana 1:50 dan beberapa di mana 1:6) lebih banyak lowongan pekerjaan daripada Vue dan 2-4 kali lebih banyak daripada Sudut. Permintaan untuk ahli React sangat kuat, jadi mengapa Vue begitu populer di GitHub (memiliki lebih banyak bintang daripada React sebenarnya) namun memiliki lebih sedikit lowongan pekerjaan? Saya tidak punya ide.

Saya ingin komunitas besar, banyak perpustakaan, solusi cepat untuk masalah yang mungkin muncul.

Reaksi. Tidak terlihat lagi.

Apakah mudah digunakan dan membuat pengembangan menjadi menyenangkan?

Sekali lagi, menurut laporan State of JS untuk 2018 dan 2017, baik React maupun Vue menikmati reputasi yang sangat baik dan sebagian besar pengembang mengatakan mereka akan menggunakannya lagi. Angular, di sisi lain, memiliki kecenderungan, dari tahun ke tahun, untuk mengirim lebih banyak orang mengatakan bahwa mereka tidak akan menggunakannya lagi.

Saya ingin membuat aplikasi satu halaman baru, tetapi saya tidak ingin mencari perpustakaan.

Itu mungkin satu-satunya tempat di mana saya akan mengatakan Angular adalah pilihan yang lebih baik.

Tidak ada perusahaan besar. Saya ingin mandiri mungkin, mana yang harus saya pilih?

Vue—itu adalah satu-satunya yang independen di trio besar kami. (Facebook mendukung React, sementara Google mendukung Angular.)

Awal termudah dan kurva belajar tercepat?

Vue/Bereaksi. Saya condong ke arah Vue di sini, tapi itu hanya pendapat pribadi saya.

Mengapa? Karena Anda bahkan tidak perlu tahu JSX (ini opsional) dan pada dasarnya hanya HTML + CSS + JavaScript.

Tutorial React: Memulai Aplikasi Pertama Anda

Cara termudah untuk memulai dengan React saat ini adalah dengan menggunakan CRA, alat CLI yang membuat proyek untuk Anda dan membantu Anda menghindari semua pengaturan yang diperlukan untuk Webpack/Babel dan banyak lagi. Alih-alih, Anda mengandalkan cara konfigurasinya secara default dan apa yang disertakan di dalamnya seiring waktu. Berkat itu, Anda tidak perlu peduli dengan pembaruan besar untuk beberapa perpustakaan penting.

Tentu saja, nanti, Anda dapat "mengeluarkan" diri sendiri dan menangani setiap aspek sendiri dengan menjalankan npm run eject . Pendekatan ini memiliki kelebihannya sendiri, karena Anda dapat menyempurnakan aplikasi Anda dengan hal-hal yang seharusnya tidak tersedia (misalnya, dekorator), tetapi juga dapat menjadi sumber sakit kepala karena memerlukan banyak file tambahan dan lebih banyak waktu.

Jadi, hal pertama yang harus dilakukan adalah:

 npx create-react-app {app-name}

Kemudian npm run start dan Anda siap untuk pergi.

Komponen Kelas vs. Fungsi

Kita harus mulai dengan menjelaskan bagaimana komponen-komponen ini berbeda. Pada dasarnya, setiap komponen dapat berupa fungsi atau kelas . Perbedaan utama di antara mereka adalah bahwa kelas satu memiliki beberapa fitur yang tidak tersedia di komponen fungsi: mereka dapat memiliki status dan menggunakan referensi, siklus hidup, dll. Itulah status permainan saat ini, dan pada versi 16.7 (atau bagaimanapun akan dipanggil karena perubahan yang telah disebutkan), kami juga akan memiliki kait, jadi status dan referensi akan dimungkinkan dengan kait.

Ada dua jenis komponen kelas: Component dan PureComponent . Satu-satunya perbedaan antara keduanya adalah bahwa PureComponent melakukan perbandingan props dan state yang dangkal—ini memiliki keuntungannya sendiri dalam situasi di mana Anda tidak ingin membuat render yang "terbuang", di mana komponen dan anaknya berada dalam status yang persis sama. setelah render. Namun, itu hanya perbandingan yang dangkal; jika Anda ingin menerapkan perbandingan Anda sendiri (misalnya, karena Anda melewatkan props yang kompleks), gunakan saja Component dan timpa shouldComponentUpdate (yang secara default mengembalikan true). Sejak 16.6+, sesuatu yang serupa juga tersedia dengan komponen fungsi—terima kasih kepada React.memo yang merupakan komponen tingkat tinggi dan secara default berperilaku seperti PureComponent (perbandingan dangkal), namun dibutuhkan argumen kedua di mana Anda dapat meneruskan perbandingan props kustom Anda sendiri .

Sebagai aturan umum, jika Anda dapat menggunakan komponen fungsi (Anda tidak memerlukan fitur kelas), maka gunakanlah. Segera, mulai dari 16.7.0, menggunakan komponen kelas hanya akan diperlukan karena metode siklus hidup. Saya cenderung percaya bahwa komponen fungsi lebih transparan, lebih mudah untuk dipikirkan, dan dipahami.

Metode Siklus Hidup Bereaksi

Konstruktor (alat peraga)

• Opsional, terutama dengan CRA yang begitu populer, di mana deklarasi bidang kelas untuk JavaScript disertakan sebagai default. Tidak ada gunanya mendeklarasikan jika Anda mengikat metode Anda dengan fungsi panah di dalam badan kelas. Keadaan serupa juga dapat diinisialisasi sebagai properti kelas.
• Harus digunakan hanya untuk menginisialisasi status lokal untuk objek dan metode pengikatan di kelas ES6.

komponenDidMount()

• Lakukan panggilan Ajax di sini.
• Jika Anda membutuhkan pendengar acara, langganan, dan semacamnya, tambahkan di sini.
• Anda dapat menggunakan setState di sini (tetapi itu akan membuat komponen dirender ulang).

komponenWillUnmount()

• Membersihkan semua hal yang masih berlangsung—misalnya, Ajax harus dihentikan, langganan berhenti berlangganan, penghitung waktu dihapus, dan sebagainya.
• Jangan panggil setState , karena tidak ada gunanya karena komponen akan dilepas (dan Anda akan mendapatkan peringatan).

componentDidUpdate (prevProps, prevState, snapshot)

• Terjadi ketika komponen baru saja selesai diperbarui (tidak terjadi pada render awal).
• Memiliki tiga parameter yang opsional untuk digunakan (props sebelumnya, status sebelumnya, dan snapshot yang hanya akan muncul jika komponen Anda mengimplementasikan getSnapshotBeforeUpdate ).
• Hanya terjadi jika shouldComponentUpdate mengembalikan nilai true.
• Jika Anda menggunakan setState di sini, Anda harus menjaganya atau Anda akan mendarat di infinite loop.

shouldComponentUpdate(nextProps, nextState)

• Hanya untuk optimasi kinerja.
• Jika mengembalikan false, maka render TIDAK akan dipanggil.
• PureComponent dapat digunakan sebagai gantinya jika SCO yang diganti hanyalah props/perbandingan keadaan yang dangkal.

getSnapshotBeforeUpdate()

• Dapat digunakan untuk menyimpan beberapa informasi tentang DOM saat ini, misalnya, posisi gulir saat ini yang nantinya dapat digunakan kembali dalam componentDidUpdate untuk mengembalikan posisi gulir.

componentDidCatch(kesalahan, info)

• Tempat di mana kesalahan logging harus terjadi.
• Dapat memanggil setState , tetapi dalam rilis mendatang, itu akan dibatalkan demi metode statis getDerivedStateFromError(error) , yang akan memperbarui status dengan mengembalikan nilai untuk memperbarui status.

Ada dua metode tambahan yang keduanya statis dan disebutkan dalam penjelasan lain

getDerivedStateFromError statis (kesalahan)

• Informasi kesalahan tersedia di sini.
• Harus mengembalikan nilai objek yang akan memperbarui status yang dapat digunakan untuk menangani kesalahan (dengan menampilkan sesuatu).
• Karena statis, ia tidak memiliki akses ke instance komponen itu sendiri.

getSnapshotBeforeUpdate statis (alat peraga, status)

• Harus digunakan dalam kasus di mana props berubah dari waktu ke waktu—sebagai contoh, menurut dokumen React, mungkin berguna untuk komponen transisi.
• Karena statis, ia tidak memiliki akses ke instance komponen itu sendiri.

Catatan, ada beberapa metode lagi yang tersedia pada hari ini, tetapi mereka seharusnya dihapus di React 17.0, jadi itu sebabnya mereka tidak disebutkan di sini.

Negara vs. Alat Peraga

Mari kita mulai dengan Props , karena lebih mudah dan lebih cepat untuk dijelaskan. Props adalah properti yang diteruskan ke komponen yang nantinya dapat digunakan kembali di dalamnya untuk menampilkan informasi/logika bisnis dan semacamnya.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

Dalam contoh di atas, name adalah prop. Alat peraga adalah elemen hanya-baca dan tidak dapat diubah secara langsung di komponen turunan. Juga, ada satu praktik buruk yang sering dilakukan orang, dan itu adalah menyalin alat peraga ke negara bagian dan mengoperasikannya di negara bagian sesudahnya. Tentu saja, ada kasus di mana Anda ingin melakukan sesuatu seperti "status awal yang akan memperbarui komponen induk setelah pengiriman", tetapi itu lebih jarang—dalam skenario seperti itu, pengumpanan status awal mungkin masuk akal. Selain itu, tidak hanya properti seperti string yang dapat diteruskan ke komponen turunan, tetapi juga angka, objek, fungsi, dll.

Alat peraga juga memiliki satu hal lagi yang berguna yang disebut defaultProps , bidang statis yang dapat memberi tahu Anda apa alat peraga default untuk suatu komponen (ketika mereka tidak diturunkan ke komponen, misalnya).

Dalam kasus "mengangkat status", di mana satu komponen (induk) memiliki status yang kemudian digunakan kembali oleh anak-anaknya (misalnya, satu anak menampilkannya dan yang lain mengizinkan pengeditan), maka kita perlu meneruskan fungsi ke anak dari parent, yang memungkinkan kita memperbarui status lokal induk.

State , di sisi lain, adalah state lokal yang dapat dimodifikasi, tetapi secara tidak langsung dengan menggunakan this.setState . Jika seseorang mengubah status secara langsung, komponen tidak akan mengetahui perubahan dan tidak akan dirender ulang untuk mencerminkan perubahan yang disebutkan pada status.

SetState adalah metode untuk mengubah objek status lokal (dengan melakukan penggabungan dangkal), dan setelah itu, komponen meresponsnya dengan merender dirinya sendiri. Ketahuilah bahwa setelah setState digunakan, properti this.state tidak akan langsung mencerminkan perubahan yang disebutkan dalam fungsi (memiliki sifat asinkron) karena beberapa contoh setState mungkin digabungkan bersama karena pengoptimalan. Ini memiliki beberapa cara untuk dipanggil di mana salah satu kemungkinan ini memungkinkan kita untuk melakukan sesuatu dengan komponen tepat setelah memperbarui status:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – formulir ini memungkinkan kita untuk melampirkan callback , yang akan dipanggil ketika status akan mencerminkan data yang ingin kita miliki (dalam argumen pertama).

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Konteks Reaksi

React baru-baru ini menstabilkan API Konteks (yang ada di React selama beberapa waktu, tetapi merupakan fitur eksperimental meskipun banyak digunakan oleh beberapa perpustakaan paling populer seperti Redux), yang membantu kami memecahkan satu masalah: pengeboran alat peraga. Pengeboran alat peraga secara singkat adalah cara untuk memasukkan alat peraga secara mendalam di dalam struktur—misalnya, ini dapat berupa semacam tema untuk komponen, lokalisasi untuk bahasa tertentu, informasi pengguna, dan sebagainya. Sebelum Konteks (atau lebih tepatnya sebelum menjadi non-eksperimental), itu dibor dengan meneruskan secara rekursif dari orang tua ke anak hingga daun terakhir (jelas ada Redux yang juga bisa menyelesaikan masalah). Ketahuilah bahwa fitur ini HANYA menyelesaikan pengeboran alat peraga dan bukan pengganti untuk hal-hal seperti Redux atau Mobx. Jelas, jika Anda menggunakan perpustakaan manajemen negara hanya untuk itu, maka Anda dapat menggantinya dengan bebas.

Membungkus

Ini menyimpulkan bagian pertama dari tutorial React kami. Dalam artikel mendatang, kami berharap dapat membahas topik yang lebih lanjut, mulai dari gaya dan jenis pemeriksaan, hingga penerapan produksi dan pengoptimalan kinerja.