react exercise

React.js latihan

Latihan ini dimaksudkan bagi Anda untuk terbiasa dengan konsep reaksi mendasar dengan cara interaktif, serta bagi Anda untuk merasa nyaman berkembang di lingkungan node.js modern. Proyek ini akan dipecah menjadi beberapa bagian. Setiap bagian akan mencakup konsep reaksi/frontend mendasar.

Panduan Pemula Bereaksi dan Panduan Pemula untuk Bereaksi akan sangat bermanfaat untuk dilalui untuk mendapatkan pemahaman yang lengkap tentang Fundamental React. Ini juga akan bermanfaat untuk mendapatkan penyelaman yang nyaman menjadi dokumen bereaksi dan dokumen JavaScript sebagai bagian dari latihan ini.

Persyaratan

• Versi Node 8.x
• Versi NPM 5.x

Instal Node dan NPM di sini.

Periksa apakah Anda memiliki versi yang benar dengan menjalankan perintah berikut di terminal Anda:

 node -v

 npm -v

Pengaturan

Instal React DevTools untuk dengan mudah men -debug dan melihat apa yang terjadi di aplikasi React Anda.

Editor teks Anda mungkin tidak mendukung sintaks JSX yang digunakan dalam proyek ini, tetapi mungkin ada plugin untuk mendapatkan penyorotan sintaks yang tepat. Misalnya, teks Sublime menggunakan plugin Babel .

Pertama, garpu repositori ini. Tombol garpu di kanan atas Anda. Apa yang dilakukannya adalah menyalin repositori ini ke akun Anda. Sekarang Anda harus memiliki repositori dengan nama <yourusername>/react-exercise .

Seharusnya terlihat seperti ini (nama pengguna saya adalah Davidachang):

Kemudian, klon repositori ini (klik tombol hijau yang mengatakan "klon atau unduh", pilih http, dan salin dan tempel lokasi <url> ) dan masuk ke dalamnya:

 $ git clone <url>
$ cd react-exercise

Instal Project Dependencies:

 npm install

Setelah itu selesai, jalankan ini untuk memulai pengembangan:

 npm start

Ini akan mulai menjalankan aplikasi dan secara otomatis membukanya di http: // localhost: 3000. Setiap kali Anda mengubah dan menyimpan kode, itu akan secara otomatis memuat ulang! Ini akan tetap menjadi proses berjalan di terminal Anda, jadi Anda harus membuka tab atau jendela baru untuk menjalankan perintah lain.

Pengaturan opsional

Prettier adalah alat yang secara otomatis memformat ulang kode Anda untuk mengikuti serangkaian pedoman gaya pengkodean tertentu. Ini dikonfigurasi untuk dijalankan secara otomatis sebelum setiap komit. Ini memastikan semua kode kami mengikuti gaya kode yang sama, menegakkan praktik yang baik dan meminimalkan konflik.

Jelas tidak perlu untuk latihan ini, tetapi ada plugin yang lebih cantik yang dapat Anda instal untuk editor Anda. Lihat instruksi di sini.

Bagian 1

Sasaran: Buatlah akrab dengan sintaks JSX, struktur komponen, dan alat peraga yang lewat

Tugas:

• Kirim Persproduksi shouldDisplayImage ke dalam komponen Instructions yang menentukan apakah akan menampilkan petunjuk logo H4I atau tidak

Bagian 2

Sasaran: Khawatir dengan daftar rendering dan fungsi array JavaScript

Tugas:

• Kirim Prop items ke Komponen Instructions yang berisi daftar string
• Tampilkan daftar titik peluru dari semua items
• Hapus semua item yang panjangnya kurang dari 3 karakter
• Membuat setiap daftar item huruf besar
• Lakukan ini tanpa for atau while loop
• Video yang sangat berguna untuk ditonton:
• Intro Pemrograman Fungsional - Hanya dua video pertama sudah cukup, meskipun ada banyak yang harus dipelajari dari daftar putar lainnya dan video lainnya! (sangat merekomendasikan berlangganan)
• Rendering Daftar dalam Bereaksi

Bagian 3

Sasaran: Kenallah dengan status komponen

Tugas:

• Buat komponen Counter baru
• Tetapkan keadaan awal count ke 0
• Tampilkan nilai jumlah saat ini
• Buat dua tombol, satu yang menambah jumlah dan satu yang menguranginya. Petunjuk

Bagian 4

Sasaran: Kenali input pengguna

Tugas:

• Di App.js , buat input dan tombol kirim yang menetapkan status pount initialCount
• Validasi input pengguna untuk memastikannya valid (adalah angka)
• Lewati status initialCount sebagai penyangga ke dalam komponen Counter , dan gunakan nilai ini sebagai count awal di Counter . Pastikan untuk mengawasi jenis saat melakukan ini, karena input pengguna adalah String dan kami ingin mengirimkan Number .
• Bonus: Tampilkan Umpan Balik UI Jika Input Pengguna Tidak Valid (Pesan Sederhana Akan Dilakukan)
• CATATAN: Jika tombol Anda menyegarkan halaman, lempar ke dalam jenis tombol: <button type="button" ...

Bagian 5

Sasaran: Memahami Komunikasi Negara/Props Antara Komponen Sibling

Tugas:

• Pindahkan tombol input dan kirimkan ke komponennya sendiri yang disebut InitialCountForm yaitu anak dari komponen App
• Mempertahankan bahwa fungsionalitas dapat mengatur penghitungan awal dari Counter Works
• Potensi bermanfaat: siklus hidup komponen reaksi, khususnya komponenwillreceiveprops. Tangensial Relevan: React Cheat Sheet
• Berguna: Memindahkan status ke atas di pohon

Bagian 6

Sasaran: Cukup terbiasa dengan CSS/SCSS dan gaya

Tugas: Tidak ada yang spesifik, bermain -main dengan gaya!

Catatan: Anda dapat membuat file SCSS, dan mereka akan secara otomatis dikompilasi ke file CSS saat Anda menyimpan, tetapi Anda perlu mengimpor file CSS ke dalam komponen Anda.

Beberapa Sumber Daya Terkait Styling:

• Pelajari tata letak
• Panduan Lengkap untuk Flexbox
• Pola BEM

Sumber daya

Panduan Pemula Bereaksi
Mdn - reintroduksi ke javascript
Panduan Pemula untuk Bereaksi
Bereaksi Dokumen
Panduan Gaya JavaScript Airbnb
Panduan Gaya Bereaksi Airbnb
Panduan Gaya CSS Airbnb

Mengirimkan

Setelah selesai dengan semua langkah, dorong perubahan Anda ke repo GitHub Anda!

Sebelum Anda dapat mengirimkan PR, Anda harus mendorong cabang Anda ke cabang jarak jauh (yang ada di GitHub, bukan lokal).

Periksa untuk melihat bahwa Anda berada di cabang Anda:

 git branch

Jika Anda ingin memastikan semua komit Anda ada di:

 git log

Tekan Q untuk keluar dari layar git log .

Dorong komit Anda ke cabang jarak jauh Anda:

 git push

Pertama kali Anda melakukan ini, Anda mungkin mendapatkan kesalahan karena cabang jarak jauh Anda belum ada. Biasanya itu akan memberi tahu Anda perintah yang benar untuk digunakan:

 git push --set-upstream origin <YOUR_BRANCH_NAME>

Catatan: Ini hanya perlu dilakukan saat pertama kali Anda mendorong cabang baru. Anda dapat menggunakan hanya git push sesudahnya.

Setelah ini selesai, silakan kirim email ke [email protected] dengan tautan ke repositori bercabang Anda dan nama cabang Anda. Kami akan membutuhkan kedua hal ini untuk melihat kiriman Anda.

 H A C K 4 I M P A C T
                    H A C K 4 I M P A C T
                                        H A C K 4 I M P A C T
                                                            H A C K 4 I M P A C T
                                                                                H A C K 4 I M P A C T