React Tutorial, Bagian 22: Tahap Ketujuh Bekerja pada Aplikasi TODO, Mengunduh Data dari Sumber Eksternal

Di bagian terjemahan React tutorial hari ini, kami akan menyelesaikan pekerjaan pada aplikasi Todo dan berbicara tentang cara menggunakan data dari komponen internal dan kemampuan JavaScript standar untuk memuat data dari sumber eksternal.



→ 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 39. Workshop. Aplikasi TODO. Tahap nomor 7

→ Asli

▍ pekerjaan

Sekarang aplikasi Todo terlihat seperti gambar berikut.


Halaman aplikasi di browser

TodoItem komponen TodoItem terlihat seperti ini:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => props.handleChange(props.item.id)}           />           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

Tugas Anda adalah mendesain item daftar sesuai dengan statusnya. Tampilan kasus yang diselesaikan harus berbeda dari tidak lengkap. Saat memformat item daftar yang mewakili tugas yang diselesaikan, teksnya dapat berwarna abu-abu, dapat dicoret, dicetak miring, atau modifikasi lainnya dapat dilakukan.

OlSolusi

Masalah yang disajikan di sini dapat diselesaikan dengan berbagai cara. Kita akan menggunakan gaya TodoItem , yang akan kita gambarkan sebagai konstanta TodoItem dalam TodoItem komponen fungsional TodoItem . Di sini kita mengkonfigurasi properti teks fontStyle , color dan textDecoration . Setelah itu, menggunakan teknik rendering bersyarat, kami akan menetapkan gaya ini ke elemen <p> jika case yang diambil olehnya ditandai sebagai selesai. Kami akan menentukan ini berdasarkan properti yang diteruskan ke instance komponen, yang tersedia di dalamnya sebagai props.item.completed .

Kode komponen yang dikonversi akan terlihat seperti ini:

 import React from "react" function TodoItem(props) {   const completedStyle = {       fontStyle: "italic",       color: "#cdcdcd",       textDecoration: "line-through"   }     return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => props.handleChange(props.item.id)}           />           <p style={props.item.completed ? completedStyle: null}>{props.item.text}</p>       </div>   ) } export default TodoItem 

Begini cara tampilan halaman aplikasi berubah.


Halaman aplikasi berubah di browser

Pada saat yang sama, gaya diterapkan ketika mengatur dan menghapus centang pada bendera yang menunjukkan status item dalam daftar yang harus dilakukan.

Ini menyimpulkan pekerjaan pada aplikasi Todo.

Pelajaran 40. Mengunduh Data dari Sumber Eksternal

→ Asli

Dalam pelajaran tentang metode siklus hidup komponen, kami berbicara tentang metode componentDidMount() . Cobalah untuk mengingat cara kerjanya. Metode ini memungkinkan Anda untuk mengganggu pengoperasian komponen dengan mengeksekusi beberapa kode segera setelah komponen ditambahkan ke pohon DOM. Ketika kita berbicara tentang metode siklus hidup komponen, saya menyebutkan bahwa metode componentDidMount() paling sering digunakan untuk memuat data dari beberapa sumber eksternal. Data ini digunakan oleh komponen untuk mewujudkan tujuannya.

Mari kita mulai eksperimen kita hari ini dengan proyek baru yang dibuat menggunakan alat create-react-app App.js yang file App.js - App.js berisi kode berikut:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }         render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Dalam kode komponen App berbasis-komponen, kami menggambarkan metode componentDidMount() dan memeriksa operabilitas dari konstruk yang dihasilkan dengan mengeluarkan sesuatu ke konsol dari metode ini.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       console.log("Hi!")   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Output ke string konsol Hi! membuktikan fungsionalitas kode, sehingga kami dapat terus bekerja. Seperti yang telah disebutkan, metode ini biasanya memuat data yang diperlukan agar komponen berfungsi.

Dalam pelajaran ini, kita akan menggunakan beberapa alat bantu yang akan berguna bagi kita saat memuat data ke dalam komponen.

Yang pertama adalah fitur JavaScript bawaan. Kita berbicara tentang Ambil API , yang merupakan antarmuka yang nyaman untuk memperoleh sumber daya, berdasarkan janji , yang memungkinkan Anda untuk melakukan permintaan HTTP, di mana data dimuat.

Alat kedua yang akan kita gunakan adalah Star Wars API . Proyek ini bagus karena dapat digunakan dalam aplikasi front-end tanpa kesulitan khusus (khususnya, kita berbicara tentang fitur konfigurasi CORS).

Dalam metode componentDidMount() , kita akan menggunakan fungsi fetch() , mengirimkannya alamat untuk memuat data, mengonversi data ini ke tipe yang kita butuhkan, dan, untuk memeriksa operasi sistem yang benar, mengeluarkan data ini ke konsol. Kami mengubah kode metode ke bentuk berikut:

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => console.log(data)) } 

Di sini kita mengunduh data tentang pahlawan film tertentu, merujuk pada API, setelah itu kita mengubah apa yang datang dari server ke format JSON, dan kemudian mencetak data ini ke konsol. Apa yang masuk ke konsol ditunjukkan pada gambar berikut.


Data yang diunduh dari Star Wars API adalah output ke konsol

Seperti yang Anda lihat, objek dengan data tentang Luke Skywalker masuk ke konsol. Sekarang, setelah kita memiliki data, kita perlu memikirkan cara menampilkannya di halaman aplikasi. Untuk mengatasi masalah ini, pertama-tama Anda harus mempertimbangkan fakta bahwa data yang diunduh dari luar, jika tidak disimpan di mana pun, tidak dapat ditampilkan pada halaman aplikasi di browser. Tempat yang berfungsi untuk menyimpan data tersebut adalah keadaan komponen. Tambahkan properti baru, character , yang diwakili oleh objek kosong ke status komponen:

 this.state = {   character: {} } 

Kita akan menyimpan objek ini di properti ini dengan deskripsi karakter, data yang diunduh dari sumber eksternal. Mereka ada sebagai objek, jadi ketika kita menginisialisasi keadaan, kita menjadikan properti character sebagai objek kosong.

Setelah itu, di tempat itu kode metode componentDidMount() , di mana kita mendapatkan data, kita akan menulisnya ke keadaan menggunakan metode setState() . Selain itu, dalam hal ini, apa yang disimpan di negara bagian sebelum itu tidak menarik bagi kita, oleh karena itu, kita dapat dengan mudah melewati metode ini objek yang berisi representasi baru negara. Akibatnya, kita sampai pada kode metode componentDidMount() ini:

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => {           this.setState({               character: data           })       }) } 

Untuk memverifikasi operasi yang benar dari mekanisme yang sekarang ada dalam kode, kami akan menampilkan dalam metode render() sesuatu yang harus ada di negara bagian setelah data yang dimuat ditulis ke dalamnya. Sekarang kode file App.js akan terlihat seperti ini:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           character: {}       }   }     componentDidMount() {       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       return (           <div>               {this.state.character.name}           </div>       )   } } export default App 

Dan inilah tampilan halaman aplikasi di browser.


Halaman aplikasi di browser

Menampilkan teks Luke Skywalker pada halaman menunjukkan bagaimana mekanisme pemuatan data bekerja.

Aplikasi kami menggunakan permintaan sederhana, sebagai tanggapan terhadap mana aplikasi menerima sejumlah kecil data yang dengan cepat diproses dan ditampilkan pada halaman. Butuh sedikit waktu untuk menyelesaikan semua tindakan ini. Oleh karena itu, data ditampilkan di layar dengan sangat cepat sehingga kami mendapatkan kesan bahwa komponen, segera setelah menampilkannya di layar, sudah berisi itu. Tetapi jika sumber data jarak jauh diakses menggunakan jalur komunikasi yang sangat lambat, atau API dari mana data dimuat secara perlahan menanggapi permintaan, dibutuhkan waktu lama sebelum aplikasi dapat menampilkan data ini di layar. . Selama ini, layar akan tetap kosong. Jika ini terjadi di aplikasi dunia nyata, itu membingungkan pengguna mereka, yang mungkin memutuskan bahwa aplikasi tersebut tidak berfungsi dengan benar. Untuk mengantisipasi situasi yang sama, perlu, selama pemuatan dan pemrosesan data, untuk menunjukkan kepada pengguna pesan yang sesuai. Ini tidak berlaku untuk topik kita hari ini, tetapi di sinilah tepat untuk membahasnya.

Dalam aplikasi nyata, untuk mengingatkan pengguna bahwa ia harus menunggu tindakan tertentu, seperti mengunduh data, mereka menggunakan sesuatu seperti indikator pemuatan. Dalam kasus kami, kami, sampai data diunggah dan siap untuk ditampilkan pada halaman, hanya akan menampilkan loading... teks loading... Dengan melakukan ini, kita akan dapat menilai kemungkinan bahwa penyimpanan data dalam keadaan aplikasi memberi kita.

Tambahkan properti baru ke status, yang menunjukkan apakah data sedang dimuat di beberapa titik waktu. Sebut itu loading dan menginisialisasi ke false . Setelah itu, segera sebelum memuat data menggunakan fetch() , kami menulis true ke properti ini.

Selanjutnya, dalam metode render() , berdasarkan properti state loading , kami akan mengonfigurasi teks yang ditampilkan pada halaman. Berikut adalah App.js kode App.js setelah konversi ini.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

Namun kode ini tidak berfungsi dengan benar. Yaitu, seperti inilah tampilan aplikasi sekarang.


Halaman aplikasi di browser

Diasumsikan bahwa loading... prasasti loading... harus ditampilkan hanya ketika mengunduh data dari sumber eksternal, tetapi tampaknya sekarang ditampilkan pada halaman secara konstan. Sebelum membaca lebih lanjut, coba dan temukan dan koreksi kesalahan dalam kode.

Sebenarnya, masalahnya di sini adalah, sebelum memulai pemuatan data, kami menetapkan loading ke true , dan setelah pengunduhan selesai, kami tidak loading false untuk loading . Akibatnya, loading... teks loading... selalu ditampilkan pada halaman. Tidak sulit untuk memperbaiki kesalahan ini. Cukup, di tempat yang sama tempat kami menulis data yang dimuat ke status, atur loading ke false . Sebagai hasilnya, kode App.js mengambil bentuk berikut:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   loading: false,                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

Sekarang, ketika memuat data, tulisan prasasti loading... muncul sebentar, dan setelah itu nama karakter ditampilkan pada halaman.

Ringkasan

Dalam pelajaran ini, Anda menyelesaikan pekerjaan pada aplikasi Todo dan belajar cara menggunakan componentDidMount() metode siklus hidup componentDidMount() dan API Ambil standar untuk memuat data dari sumber eksternal, memprosesnya, dan menampilkannya di halaman. Selain itu, di sini kita berbicara tentang implementasi mekanisme untuk memberi tahu pengguna tentang operasi yang menjalankan aplikasi, yang dapat memakan banyak waktu. Lain kali kita akan berbicara tentang formulir.

Pembaca yang budiman! Bagaimana Anda memuat data dari sumber eksternal ke aplikasi Bereaksi?