React Tutorial Bagian 2: Komponen Fungsional

Dalam salah satu artikel kami sebelumnya, kami bertanya kepada Anda apakah disarankan untuk membuat serangkaian publikasi tradisional berdasarkan kursus Bereaksi ini . Anda mendukung ide kami. Karena itu, hari ini kami sajikan untuk perhatian Anda kelanjutan kursus. Di sini kita berbicara tentang komponen fungsional.




→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus

Pelajaran 6. Komponen Fungsional

→ Asli

Pada pelajaran praktis sebelumnya, kami berbicara tentang fakta bahwa tidak perlu menempatkan semua kode JSX yang membentuk elemen HTML dalam argumen metode ReactDOM.render() . Dalam kasus kami, kami berbicara tentang daftar berpoin, yang dijelaskan di bawah ini.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

Bayangkan apa yang Anda butuhkan untuk ditampilkan, menggunakan pendekatan yang sama, seluruh halaman web di mana ada ratusan elemen. Jika ini dilakukan, maka praktis tidak mungkin untuk mempertahankan kode seperti itu secara normal. Ketika kami berbicara tentang alasan popularitas React, salah satunya adalah dukungannya untuk komponen yang dapat digunakan kembali di perpustakaan ini. Sekarang kita akan berbicara tentang cara membuat komponen Bereaksi fungsional.

Komponen-komponen ini disebut "fungsional" karena fakta bahwa mereka membuatnya dengan membangun fungsi-fungsi khusus.

Buat fungsi baru dan beri nama MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

Nama fungsi dibuat dengan tepat karena skema penamaan fungsi konstruktor digunakan di sini. Nama-nama mereka (sebenarnya - nama-nama komponen) ditulis dalam gaya unta - huruf pertama dari kata-kata yang dikandungnya dibuat dalam huruf kapital, termasuk huruf pertama dari kata pertama. Anda harus benar-benar mematuhi konvensi penamaan ini untuk fungsi-fungsi tersebut.

Komponen fungsional disusun cukup sederhana. Yaitu, dalam tubuh fungsi harus ada perintah yang mengembalikan kode JSX, yang mewakili komponen yang sesuai.

Dalam contoh kita, cukup mengambil kode berpoin dan mengatur pengembalian kode ini dari komponen fungsional. Begini tampilannya:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> } 

Dan meskipun dalam hal ini semuanya akan berfungsi seperti yang diharapkan, yaitu, perintah return akan mengembalikan semua kode ini, disarankan untuk menyertakan konstruksi serupa dalam tanda kurung dan menerapkan konvensi lain yang diadopsi dalam Bereaksi ketika memformat kode program. Ini terdiri dari menempatkan elemen individu pada garis yang terpisah dan menyelaraskannya. Sebagai hasil dari penerapan ide-ide di atas, kode komponen fungsional kami akan terlihat seperti ini:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } 

Dengan pendekatan ini, markup yang dikembalikan dari komponen sangat mirip dengan kode HTML biasa.

Sekarang, dalam metode ReactDOM.render() , Anda bisa membuat instance komponen fungsional kami dengan meneruskannya ke metode ini sebagai argumen pertama dan melampirkannya dalam tag JSX.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") ) 

Anda mungkin memperhatikan bahwa tag penutup diri digunakan di sini. Dalam beberapa kasus, ketika Anda perlu membuat komponen yang memiliki struktur yang lebih kompleks, desain yang serupa dibuat secara berbeda, tetapi untuk sekarang, kami akan menggunakan tag yang dapat ditutup sendiri.

Jika Anda me-refresh halaman yang dibentuk oleh kode di atas, maka tampilannya akan sama seperti sebelum markup daftar berpoin dikeluarkan ke komponen fungsional.

Markup yang dikembalikan oleh komponen fungsional mematuhi aturan yang sama yang kami pertimbangkan saat menerapkan metode ReactDOM.render() ke parameter pertama. Artinya - tidak mungkin mengandung elemen JSX yang mengikuti satu demi satu. Mencoba meletakkan elemen lain setelah elemen <ul> dalam contoh sebelumnya, katakanlah - <ol> , akan menghasilkan kesalahan. Anda dapat menghindari masalah ini, misalnya, dengan hanya membungkus segala sesuatu yang mengembalikan komponen fungsional dalam elemen <div> .

Mungkin Anda sudah mulai merasakan peluang kuat apa yang diberikan komponen fungsional kepada kami. Secara khusus, kita berbicara tentang membuat komponen kita sendiri yang berisi fragmen kode JSX, yang merupakan deskripsi dari markup HTML yang muncul di halaman web. Komponen semacam itu dapat diatur bersama.

Dalam contoh kami, ada komponen yang menampilkan daftar HTML sederhana, tetapi karena kami membuat aplikasi yang semakin kompleks, kami akan mengembangkan komponen yang menampilkan komponen lain yang kami buat. Akibatnya, semua ini akan berubah menjadi elemen HTML biasa, tetapi kadang-kadang, untuk pembentukan elemen-elemen ini, Anda mungkin membutuhkan puluhan komponen Anda sendiri.

Akibatnya, saat kami membuat lebih banyak komponen, kami akan menempatkannya dalam file yang terpisah, tetapi untuk saat ini penting bagi Anda untuk menguasai apa yang baru saja kita bahas, biasakan komponen fungsional. Selama kursus Anda akan membuat struktur file yang semakin kompleks.

Dalam pelajaran ini, kami memeriksa dasar-dasar komponen fungsional, dan selanjutnya kami menerapkan pengetahuan yang diperoleh dalam praktik.

Pelajaran 7. Workshop. Komponen fungsional

→ Asli

▍ pekerjaan

1. Mempersiapkan proyek Bereaksi dasar.
2. Buat komponen fungsional MyInfo yang membentuk elemen HTML berikut:
   
   
   1. Elemen <h1> dengan nama Anda.
   2. Paragraf teks (elemen <p> ) yang berisi cerita pendek tentang diri Anda.
   3. Daftar, ditandai ( <ul> ) atau bernomor ( <ol> ), dengan daftar tiga tempat yang ingin Anda kunjungi.
3. Daftar instance komponen MyInfo di halaman web.

▍ Tugas tambahan

Ubahsuaikan elemen laman dengan mempelajari tentang cara melakukannya sendiri (cari Google). Perlu dicatat bahwa kita akan berbicara lebih banyak tentang komponen penataan dalam kursus ini.

Catatan: blok yang dapat dilipat

OlSolusi

Di sini kami puas dengan halaman HTML yang sama yang kami gunakan sebelumnya. File dengan kode Bereaksi juga akan terlihat cukup standar. Yaitu, kami mengimpor perpustakaan ke dalamnya, membuat kerangka komponen fungsional MyInfo dan memanggil metode render() dari objek ReactDOM , mengirimkannya komponen yang akan ditampilkan pada halaman dan tautan ke elemen halaman di mana komponen ini harus ditampilkan. Pada tahap ini, kode akan terlihat seperti ini:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root")) 

Sekarang Anda perlu mengembalikan kode JSX dari MyInfo yang menghasilkan markup HTML sesuai dengan tugas. Ini adalah kode solusi lengkap.

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Perhatikan bahwa konstruk yang dikembalikan dari MyInfo terlampir dalam tanda kurung, dan bahwa elemen yang akan ditampilkan ada di dalam elemen helper <div> .

Ringkasan

Pada artikel ini, kami memperkenalkan komponen fungsional React. Lain kali kita akan berbicara tentang file komponen dan struktur proyek Bereaksi.

Pembaca yang budiman! Jika Anda mengikuti kursus ini, beri tahu kami tentang lingkungan tempat Anda melakukan latihan.