Sudah ada banyak artikel tentang ReactJS. Tetapi untuk mulai mempelajari seorang programmer pemula, Anda perlu menemukan awal di mana fondasi penciptaannya. Saya ingin menunjukkan bahwa tidak ada yang rumit dalam memahami prinsip-prinsip pengembangan frontend pada kerangka kerja ini.
Salah satu metode studi memungkinkan saya untuk memahami struktur banyak sistem perangkat lunak yang kompleks dan itu bermuara pada kenyataan bahwa Anda perlu menulis ulang proyek yang sedang Anda pelajari sehingga Anda mendapatkan beberapa jenis binatang tidak dikenal yang setidaknya bergerak sedikit dan agak mirip dengan prototipe-nya.
Saya harus mengakui bahwa saya adalah back-end dan saya bahkan tidak tahu apa yang memotivasi saya untuk menulis sebuah karya mikro dalam JavaScript. Tapi sejujurnya, itu keinginan untuk belajar JS.
Bahkan, ada motivasi yang baik untuk membuat proyek dalam bentuk modul / komponen. Dalam pandangan programmer backend, data yang paling mirip objek JSON, mereka harus dibentuk ke dalam struktur yang diinginkan dan dikirim jika perlu, dan kemudian melakukan apa pun yang Anda inginkan dengan mereka. Di ujung depan, dalam versi paling primitif, Anda harus memilih elemen HTML yang diperlukan berdasarkan ID dan memperbarui atributnya, serta mengubah simpul teks. Mempermudah kerangka kerja JavaScript.
Suatu kali saya menulis kerangka kerja PHP-Slim, yang jauh dari aslinya, tetapi sangat membantu saya dalam proyek PHP. Hari ini saya ingin berbicara tentang bagaimana saya mempresentasikan asal-usul pengembangan ReactJS. Saya menulis satu file dalam 135 baris kode yang disebutnya bots.js dan jika Anda menghubungkannya dan menulis komponen seperti di Bereaksi, Anda bahkan dapat melihat sesuatu di browser. Saya memanggilnya ReactKids.
Idenya adalah untuk memecah proyek menjadi komponen, menambahkan komponen menggunakan javascript, dan memastikan bahwa tidak ada ketergantungan antara komponen.
Struktur standar HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>HelloReactKids</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="js/bots.js"></script> <script src="js/pict.js"></script> <script src="js/navbar.js"></script> <script src="js/label.js"></script> <script src="js/button.js"></script> <script src="js/app.js"></script> </body> </html>
Untuk aplikasi, tentukan id = root dan hubungkan bots.js, lalu hubungkan komponen (atau tulis sendiri) dan jalankan di app.js.
Komponen dalam ReactKids terlihat seperti ini:
function Button(attr) {
Komponen dalam kasus kami hanya bisa menjadi fungsi di mana params disebut attr.
Di sini Anda harus memperhatikan mengapa attr ini berguna. Pertama-tama, mereka yang akrab dengan reaksi tahu bahwa adalah mungkin untuk "menurunkan" data ke komponen anak mereka. Yaitu, komponen mengembalikan komponen yang mengembalikan komponen, dan seterusnya hingga komponen yang tidak memiliki anak. Namun, mereka juga digunakan sebagai paket untuk data yang berasal dari server. Permintaan untuk backend sebagian besar dikirim dari fungsi yang menangani peristiwa yang terkait dengan interaksi dengan antarmuka pengguna.
Ketika server mengirim kembali JSON (biasanya dalam teks), itu perlu diubah menjadi objek JS dan dilakukan di suatu tempat. Inilah tujuan params dalam React dan attr dalam implementasi anak kami.
Dalam attr, Anda dapat menjejalkan seluruh objek JSON yang diterima dari server, atau Anda hanya bisa mendapatkan data
terbaik yang Anda butuhkan dan, mungkin, ditambah dengan data lain yang diperlukan.
Selanjutnya, kita mengikuti logika React dewasa - pada awal fungsi, kita memproses objek attr dan melakukan urusan bisnis lainnya. Maka Anda perlu mengembalikan hasil memanggil fungsi elem (), yang implementasinya ada di bots.js. Parameter berikut ditransfer ke parameter panggilan:
- Nama tag.
- Objek dengan gaya (dalam format JS)
- Atribut untuk tag.
- Teks, tag atau komponen lain (anak) atau tidak ada yang dilewatkan.
Lihatlah app.js:
var attr = { labelContent: "Hello React Kids", labelButton: "This button", } rend(document.getElementById("root"), App(attr)) function App(attr) { return elem( "div", { fontFamily: "segoe ui", color: "gray", textAlign: "center", }, { id: "app", }, [ Navbar(attr), Pict(attr), Label(attr), Button(attr), ] ) }
Tidak ada yang aneh di sini. Ini sama rumitnya:
function App(attr) { var cpic1 = CirclePict({id: "img1", src: "./img/img1.jpg", height: "200px"}) var cpic2 = CirclePict({id: "img1", src: "./img/img2.jpg", height: "200px"}) var cpic3 = CirclePict({id: "img1", src: "./img/img3.jpg", height: "200px"}) var txt1 = " . ."; var txt2 = " , ."; return elem( "div", { fontFamily: "segoe ui", color: "gray", }, { id: "app", }, [ Pict({id: "logo", src: "./img/logo.png", height: "90%"}), Text({id: "info", text: "you number", direction: "right"}), Label(attr), Outer({id: "outer1", content: [cpic1, cpic2, cpic3]}), Text({id: "txt1", text: txt1, width: "450px"}), Button(attr), Label({id: "lbl2", labelContent: " "}), Text({id: "txt2", text: txt2, width: "650px", direction: "center"}), RoundPict({id: "well", src: "./img/well.jpg", height: "280px", width: "550"}) ] ) }
Seperti yang Anda lihat, kami telah menyematkan komponen CirclePict di komponen Outer 3.
Anak-anak, tentu saja, memperhatikan kekurangan JSX. Bahkan, itu diciptakan oleh pemrogram malas dan hanya memfasilitasi apa yang kita tulis. Akibatnya, tag JSX masih berubah menjadi JavaScript.
Sekarang Anda perlu melihat bagaimana ini sekarang diterapkan di bots.js. Kerangka kerja ini terdiri dari 3 fungsi keseluruhan, sebenarnya elem () dan setAttr (), yang pertama dibuat, yang kedua untuk memperbarui keadaan komponen dan rend () untuk ditampilkan di app.js.
function elem(elt, style, attr, item) { if(elt) {
Fungsi memproses parameter yang dilewatkan ke sana dalam urutan yang sama:
- Buat komponen di pohon dokumen.
- Menambahkan gaya ke dalamnya.
- Atribut.
- Menambahkan elemen turunan sebagai teks atau elemen lainnya.
Saat memproses atribut, kami juga memeriksa tipenya, jika suatu fungsi diterima sebagai nilai, maka diasumsikan bahwa ini adalah peristiwa dan kami menggantung penyadapan di atasnya. Oleh karena itu, tetap hanya untuk mendeklarasikan dan mengimplementasikan fungsi yang ditunjukkan sebagai suatu peristiwa.
Dalam fungsi penanganan acara inilah kita memanggil setAttr (), meneruskan objek itu sendiri dengan attr yang diperbarui ke sana. Ada satu hal tetapi - untuk setiap elemen yang dibuat di attr, Anda harus menentukan id, jika tidak, itu tidak akan diperbarui melalui setAttr. Dia dengan id menemukannya di DOM.
Adapun setAttr (), semuanya lebih buruk daripada di Bereaksi, meskipun untuk memahami prinsip-prinsip itu sudah cukup (baik, atau hampir cukup).
function setAttr(update, slow) { if(slow) { var replace = document.getElementById(update.id) var opamax = 0.99 var opaint = 0.01 var outslow = setInterval(function() { opamax = opamax - opaint if(opamax <= 0) { clearInterval(outslow) update.style.opacity = opamax replace.parentNode.replaceChild(update, replace) var inslow = setInterval(function() { opamax = opamax + opaint update.style.opacity = opamax if(opamax >= 1) { clearInterval(inslow) } }, slow) } replace.style.opacity = opamax }, slow) } else { var replace = document.getElementById(update.id) replace.parentNode.replaceChild(update, replace) } }
Seperti yang Anda lihat di sini, hanya manipulasi dengan pohon dokumen dan efek fading lainnya, sehingga setidaknya terlihat dan kode tersebut terlihat seperti fungsi, bukan helloworld.
Hal paling keren dalam kerangka kerja anak-anak kita adalah fungsi rendering:
function rend(root, elem) { root.appendChild(elem) }
Saya perhatikan bahwa sulit bagi programmer pemula untuk mulai belajar hal-hal seperti Bereaksi murni secara psikologis. Setelah melihat ratusan megabyte perpustakaan dan jutaan baris kode, Anda harus mengalami depresi dan mencari hal lain. Secara khusus, mereka beralih ke Vue. Tentu saja, ini juga merupakan kerangka kerja yang baik, tetapi bahkan lebih baik untuk memahami kedua pendekatan untuk pengembangan frontend.
Ternyata lingkungan perangkat lunak yang kompleks muncul dari solusi kecil namun efektif. Karena itu, saya ucapkan semoga sukses bagi semua yang mencari pengetahuan Bereaksi. Semoga kekuatan ikut bersama kami!