React Tutorial Bagian 6: Beberapa Fitur Kursus, JSX, dan JavaScript

Hari ini kami menerbitkan kelanjutan kursus pelatihan Bereaksi. Di sini kita akan berbicara tentang beberapa fitur kursus, khususnya, mengenai gaya kode. Di sini kita berbicara lebih detail tentang hubungan antara JSX dan JavaScript.



→ 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 13. Tentang beberapa fitur kursus

→ Asli

Sebelum kita melanjutkan, saya ingin berbicara sedikit tentang beberapa fitur kode yang saya tunjukkan dalam kursus ini. Anda mungkin memperhatikan bahwa titik koma biasanya tidak digunakan dalam kode. Misalnya, seperti yang Anda lihat, dalam contoh seperti berikut ini, mereka tidak:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

Anda dapat terbiasa dengan titik koma jika memungkinkan. Kemudian, misalnya, dua baris pertama dari fragmen kode sebelumnya akan terlihat seperti ini:

 import React from "react"; import ReactDOM from "react-dom"; 

Saya baru-baru ini memutuskan bahwa saya akan melakukannya tanpa mereka, sebagai hasilnya, saya mendapatkan kode yang Anda lihat dalam contoh. Tentu saja, ada konstruksi dalam JavaScript yang tidak dapat dilakukan tanpa titik koma. Katakanlah, saat mendeskripsikan for for , sintaksnya terlihat seperti ini:

 for ([]; []; [ ]) 

Tetapi dalam kebanyakan kasus Anda dapat melakukannya tanpa titik koma di akhir baris. Dan ketidakhadiran mereka dalam kode tidak akan mengganggu pekerjaannya. Sebenarnya, pertanyaan menggunakan titik koma dalam kode adalah pertanyaan tentang preferensi pribadi programmer.

Fitur lain dari kode yang saya tulis adalah meskipun ES6 secara teknis memungkinkan Anda untuk menggunakan fungsi panah dalam kasus di mana fungsi dinyatakan menggunakan kata kunci function , saya tidak menggunakannya.

Misalnya, kode di atas dapat ditulis ulang seperti ini:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

Tapi saya tidak terbiasa. Saya percaya bahwa fungsi panah sangat berguna dalam kasus-kasus tertentu di mana fitur-fitur dari fungsi-fungsi ini tidak mengganggu operasi kode yang benar. Misalnya, ketika mereka biasanya menggunakan fungsi anonim, atau ketika mereka menulis metode kelas. Tapi saya lebih suka menggunakan fitur tradisional. Banyak, ketika menggambarkan komponen fungsional, gunakan fungsi panah. Saya setuju bahwa pendekatan ini memiliki kelebihan dibandingkan menggunakan desain tradisional. Pada saat yang sama, saya tidak berusaha memaksakan cara tertentu untuk mendeklarasikan komponen fungsional.

Pelajaran 14. BEJ dan JavaScript

→ Asli

Dalam pelajaran selanjutnya kita akan berbicara tentang gaya bawaan. Sebelum beralih ke topik ini, kita perlu mengklarifikasi beberapa fitur interaksi antara JavaScript dan JSX. Anda sudah tahu bahwa, dengan menggunakan kemampuan Bereaksi, kita dapat, dari kode JavaScript biasa, mengembalikan konstruk yang menyerupai markup HTML normal, tetapi adalah kode JSX. Ini terjadi, misalnya, dalam kode komponen fungsional.

Bagaimana jika ada variabel tertentu yang nilainya perlu diganti menjadi kode JSX yang dikembalikan oleh komponen fungsional?

Misalkan kita memiliki kode seperti ini:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Tambahkan ke komponen fungsional beberapa variabel yang berisi nama depan dan belakang pengguna.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

Sekarang kami ingin agar komponen fungsional kembali menjadi bukan header tingkat pertama dengan teks Hello world! , dan tajuk berisi salam seperti Hello Bob Ziroll! yang dibentuk menggunakan variabel yang tersedia di komponen.

Mari kita coba menulis ulang apa yang komponen kembalikan, seperti ini:

 <h1>Hello firstName + " " + lastName!</h1> 

Jika Anda melihat apa yang muncul di halaman setelah memproses kode seperti itu, ternyata itu tidak seperti yang kita butuhkan. Yaitu, teks Hello firstName + " " + lastName! . Pada saat yang sama, jika proyek standar yang dibuat oleh alat create-react-app digunakan untuk menjalankan contoh, kita akan diperingatkan bahwa konstanta firstName dan lastName diberikan nilai yang tidak digunakan di mana pun. Benar, ini tidak akan mencegah tampilan pada halaman teks yang persis apa yang dikembalikan oleh komponen fungsional, tanpa mengganti bukannya apa yang tampaknya bagi kita nama variabel, nilainya. Sistem menganggap nama variabel dalam formulir ini sebagai teks biasa.

Kami akan bertanya bagaimana memanfaatkan JavaScript dalam kode JSX. Sebenarnya, melakukan ini cukup sederhana. Dalam kasus kami, cukup dengan hanya menyertakan apa yang harus ditafsirkan sebagai kode JavaScript dalam kurung kurawal. Akibatnya, komponen yang dikembalikan akan terlihat seperti ini:

 <h1>Hello {firstName + " " + lastName}!</h1> 

Pada saat yang sama, teks Hello Bob Ziroll! . Anda dapat menggunakan konstruksi JavaScript biasa di bagian kode JSX ini, disorot dengan kurung kurawal. Berikut kode yang akan ditampilkan di browser:


Halaman dengan markup yang dihasilkan oleh JSX dan JavaScript

Karena ketika bekerja dengan string dalam kondisi modern, fitur ES6 terutama digunakan, kami menulis ulang kode yang menggunakannya. Yaitu, kita berbicara tentang templat literal yang digambar menggunakan backticks ( ` ` ). String semacam itu mungkin mengandung konstruksi bentuk ${} . Perilaku standar literal templat melibatkan penghitungan ekspresi yang terkandung dalam kurung keriting dan mengonversi apa yang terjadi pada string. Dalam kasus kami, akan terlihat seperti ini:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

Harap perhatikan bahwa nama depan dan belakang dipisahkan oleh spasi, yang ditafsirkan di sini sebagai karakter biasa. Hasil dari mengeksekusi kode ini akan sama seperti yang ditunjukkan di atas. Secara umum, hal terpenting yang harus Anda pahami sekarang adalah apa yang disertakan dalam kurung kurawal yang terletak di kode JSX adalah JS biasa.

Pertimbangkan contoh lain. Yaitu, kami menulis ulang kode kami sehingga jika dipanggil di pagi hari, itu akan menampilkan teks Good morning , jika di sore hari - Good afternoon , dan jika di malam hari - Good night . Untuk memulainya, kami akan menulis sebuah program yang melaporkan jam berapa sekarang. Berikut adalah kode komponen fungsional App yang memecahkan masalah ini:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

Di sini contoh baru objek Date dibuat. JSX menggunakan kode JavaScript, terima kasih untuk itu dengan memanggil metode date.getHours() , yang sekarang menjadi satu jam, setelah itu, menghitung sisa pembagian angka ini dengan 12 , kami mengonversi waktu ke format 12 jam. Dengan cara yang sama, dengan memeriksa waktu, kita dapat membentuk garis yang kita butuhkan. Misalnya, mungkin terlihat seperti ini:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

Ada variabel timeOfDay , dan menganalisis waktu saat ini menggunakan if , kami mencari waktu hari dan menuliskannya ke variabel ini. Setelah itu, kami menggunakan variabel dalam komponen yang dikembalikan oleh kode JSX.

Seperti biasa, disarankan untuk bereksperimen dengan apa yang kita pelajari hari ini.

Ringkasan

Dalam pelajaran ini, kita berbicara tentang beberapa fitur gaya kode yang digunakan dalam kursus ini, serta interaksi JSX dan JavaScript. Menggunakan kode JavaScript di JSX membuka peluang besar, kegunaan praktis yang akan kita rasakan dalam pelajaran berikutnya, ketika kita akan berurusan dengan gaya bawaan.

Pembaca yang budiman! Apakah Anda menggunakan titik koma dalam kode JavaScript Anda?