Tutorial React Intermediate: 3 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Tutorial React Intermediate

Lihat produk siap di sini.

Apa yang akan anda pelajari?

Anda akan membuat senarai yang mudah dilakukan dengan React.js, dan mengetahui bahagian reaksi yang lebih rumit. Prasyarat (sangat disarankan) melengkapkan panduan memulakan react.js. Pengetahuan mengenai HTMLPengetahuan mengenai CSS Perintah shell asasPengetahuan terkini dalam JavaScript

Bekalan

Semua perisian akan dibahas dalam tutorial.

Anda memerlukan komputer dengan perisian berikut dipasang:

• npm / benang
• IDE yang menyokong js
• Penyemak imbas web

Langkah 1: React Intermediate Tutorial

Bermula

Mengapa React.js?

Dengan React.js, intinya adalah menggunakan semula kod. Sebagai contoh, katakan anda mempunyai bar navigasi yang anda miliki dalam 100 halaman. Sekiranya anda perlu menambahkan halaman baru, maka anda perlu menukar bar navigasi di setiap halaman, yang bermaksud bahawa anda harus melakukan perkara yang sama untuk 100 halaman. Walaupun dengan makro, ini menjadi sangat membosankan.

Memasang Perisian / Pakej yang Diperlukan

Anda perlu:

npm / benang

Bagaimana untuk memasang:

1. Pergi dan pasang LTS terbaru Node.js
2. PILIHAN: jika anda lebih suka benang sebagai pengurus pakej anda, pasang benang dengan menaip benang pemasangan ng powerhell npm
3. Buka powerhell / cmd.exe
4. Navigasi ke direktori di mana anda ingin membuat projek anda
5. Taipkan npx create-react-app.

Anda telah menyelesaikan fasa persediaan. untuk mengujinya, buka powerhell, arahkan ke direktori projek anda, dan taipkan npm start. anda harus memuatkan laman web pada penyemak imbas lalai anda.

Langkah 2: Langkah 1: Bermula

Untuk memulakan, hapus fail berikut dari direktori / src anda:

• App.test.js
• index.css
• logo.svg
• perkhidmatanWorker.js
• persediaanTests.js

Kami tidak memerlukan fail ini.

Mari juga atur sistem fail kami. Buat direktori ini di / src /:

• js
• css

masukkan App.js ke dalam js dir dan App.css ke dalam css dir.

Seterusnya, mari kita susun semula kebergantungan.

di index.js, alih keluar import untuk serviceWorker dan index.css. Padamkan serviceWorker.register (). Ubah arah jalan untuk Aplikasi.

di App.js, alih keluar import untuk logo.svg, kerana kami tidak memerlukannya lagi. Ubahsuai App.css. hapus fungsi App () dan eksport untuk App.

Dalam React, kami mempunyai 2 cara untuk menentukan elemen. Kami mempunyai fungsi dan kelas. fungsi adalah untuk item yang kurang rumit, dan kelas umumnya untuk komponen yang lebih rumit. Kerana senarai todo lebih rumit daripada sekumpulan HTML, kami akan menggunakan sintaks kelas.

Tambahkan ini ke kod anda:

pastebin.com/nGXeCpaH

html akan masuk dalam 2 div.

mari kita tentukan Elemen.

pastebin.com/amjd0jnb

perhatikan bagaimana kita menentukan nilai di negeri ini. Kami memerlukannya kemudian.

dalam fungsi render, ganti hi dengan {this.state.value}

kami memberikan nilai yang dilalui dari keadaan yang kami tentukan.

jadi mari kita mengujinya!

dalam fungsi render Aplikasi, gantikan dengan ini:

pastebin.com/aGLX4jVE

ia harus memaparkan nilai: "test".

mari kita lihat sama ada kita dapat membuat pelbagai Tugas!

bukannya membuat React untuk memberikan hanya satu elemen, kita dapat membuat susunan dan memberitahu bereaksi untuk menjadikan array sebagai gantinya.

ubah fungsi render ke ini:

pastebin.com/05nqsw71

ini harus menjadikan 10 tugas berbeza. Perhatikan bagaimana kami menambah kunci. Kekunci ini digunakan sebagai pengecam untuk bertindak balas dan kita, sekiranya kita memerlukannya.

Sekarang senarai tugas kami berfungsi, kami mencari jalan untuk memuatkan tugas. Di sinilah negeri kita masuk.

mari tambah konstruktor untuk kami.

pastebin.com/9jHAz2AS

Dalam konstruktor ini, kami mengalihkan taskArray dari fungsi render ke keadaan. hapus taskArray dan untuk gelung dalam fungsi render. ubah taskArray di div menjadi this.state.taskArray.

Sekarang, kod App.js anda akan kelihatan seperti ini:

pastebin.com/1iNtUnE6

Langkah 3: Menambah Cara Menambah dan Menghapus Objek

Mari tambahkan cara untuk menambah dan membuang objek. Mari rancangkannya.

Apa yang kita perlukan?

• Kaedah untuk pengguna menambah objek
• Tempat menyimpan objek
• Kaedah untuk mendapatkan semula objek

Apa yang akan kita gunakan?

• Unsur
• API localstorage dengan JSON

Mari kita mulakan dengan elemen input.

di bawah {this.state.taskArray}, tambahkan input dan butang pada kod anda

Tambah

Harus ada input teks dan butang Tambah sekarang.

Tidak ada apa-apa sekarang, jadi mari kita tambahkan 6 kaedah ke kaedah Aplikasi kita.

Kami memerlukan kaedah untuk ketika butang diklik, dan juga ketika seseorang mengetik input. Kami juga memerlukan cara untuk menghasilkan array tugas, serta menyimpan, memuat, dan menghapus tugas.

mari kita tambahkan 6 kaedah ini:

butangKlik ()

inputTyped (evt)

menghasilkanTaskArray ()

saveTasks (tugas)

getTasks ()

removeTask (id)

mari kita tambahkan pemboleh ubah ini ke negeri kita:

input

Kita juga perlu mengikat fungsi kita dengan ini.

pastebin.com/syx465hD

Mari mula menambah fungsi.

tambah 2 atribut yang serupa sehingga:

ini menjadikannya apabila pengguna menaip apa-apa dalam input, ia melaksanakan fungsi.

tambahkan atribut onClick ke Tambah seperti itu:

Tambah

apabila pengguna mengklik butang, fungsi tersebut dijalankan.

sekarang bahagian html sudah selesai, mari kita mulakan fungsi.

Saya telah menulis pra-muka antara muka API LocalStorage, jadi ganti fungsi saveTasks, getTasks, dan removeTask dengan ini:

pastebin.com/G02cMPbi

mari kita mulakan fungsi inputTyped.

apabila pengguna menaip, kita perlu mengubah nilai dalaman input.

mari kita lakukan dengan menggunakan fungsi setState yang disediakan dengan react.

this.setState ({input: evt.target.value});

dengan cara ini, kita dapat memperoleh nilai input.

setelah selesai, kita boleh mengusahakan fungsi tombolClick.

kita perlu menambahkan tugas ke senarai tugas. kami mula-mula menarik senarai tugas dari localStorage, mengeditnya, dan kemudian menyimpannya. Kami kemudian memanggil penjawab semula senarai tugas untuk mengemas kini.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

ini.saveTasks (taskList);

ini.generateTaskArray ();

kita mendapat tugas, memasukkan nilai input ke dalam tugas, dan kemudian menyimpannya. Kami kemudian menghasilkan susunan tugas.

sekarang, mari kita kerjakan fungsi menghasilkanTaskArray ().

kita perlu:

• dapatkan tugas
• buat pelbagai komponen tugas
• lulus komponen tugas yang akan diberikan

kita boleh mendapatkan tugas dan menyimpannya dalam pemboleh ubah dengan getTasks ()

tugas var = getTasks (). tugas

kita perlu membuat susunan dan mengisinya.

pastebin.com/9gNXvNKami

ia mesti berfungsi sekarang.

KOD SUMBER:

github.com/bluninja1234/todo_list_instructables

IDE LUAR BIASA:

Fungsi penghapusan (sangat mudah, tambahkan onclick dan hapus menggunakan removeTask dari indeks utama)

CSS (juga ringkas, tulis sendiri atau gunakan bootstrap)