Bootstrapping dan Manajemen Negara
Saya sedang mencari React Stack yang paling sederhana. Itu harus tahan masa depan dan penuh fitur, tetapi yang paling penting, itu harus mudah digunakan.
Dalam seri ini saya akan mencari solusi yang mudah digunakan untuk mengimplementasikan versi klasik React TodoMVC yang telah di-buff. Ketika saya merasa dapat mencapai sesuatu yang lebih sederhana, saya akan membuat perpustakaan pembantu sendiri. Topik-topik berikut kemungkinan besar akan dibahas sebelum final.
- Bootstrap
- Manajemen Negara
- Rute
- Penataan gaya
- Jaringan
- Pengujian
- Tuan rumah
Episodenya akan pendek dan… sederhana.
Bootstrap dan Bundling
Buat Aplikasi React sulit dikalahkan di sini. Ini menyiapkan banyak barang tersembunyi hanya dengan beberapa perintah.
npx create-react-app todos cd todos npm start
Hal ini menciptakan Aplikasi Web Progresif offline pertama dengan dukungan ES6+, CSS yang diawali otomatis, dan server pengembang pengawas. Begitu banyak teknologi bagus dalam satu kalimat! Luar biasa.
Anda dapat menguji dan membuat kode nanti dengan perintah npm test
/ npm run build
. Jika proyek Anda melebihi Create React App, jalankan saja npm run eject
dan ambil alih kendali.
Itu dia! Mari langsung ke pengembangan dengan mengedit folder src
— yang dibuat oleh React Create App.
Manajemen Negara
Pengelolaan negara bukanlah pilihan yang jelas bagi saya. Saya memutuskan untuk mengotori tangan saya dan menulis solusi saya sendiri. Ini disebut React Easy State dan inilah cara Anda menggunakannya.
#1. Instalasi
npm install react-easy-state
#2. Buat Toko
Toko adalah objek biasa dengan seluruh kekuatan ES6. Mari kita buat satu di src/store.js
dengan beberapa metode mutasi dan tugas yang dapat difilter.
Pastikan untuk membungkus objek toko Anda dengan store
sebelum Anda mengekspornya.
#3. Ubah Aplikasi
Langkah selanjutnya adalah mengintegrasikan komponen src/App.js
yang ada dengan todos store. Cukup impor toko dan gunakan sebagai objek biasa.
Pastikan untuk membungkus komponen Anda dengan view
sebelum Anda mengekspornya.
#4. Tambahkan Semua
Tambahkan komponen baru untuk item tugas. Sekali lagi, Anda dapat mengimpor dan menggunakan toko sebagai objek biasa.
Pembungkus view
secara otomatis mengikat metode Anda, Anda tidak perlu khawatir untuk meneruskannya sebagai panggilan balik.
Garis bawah
Kami membuat versi aplikasi TodoMVC yang disederhanakan dengan vanilla React, beberapa perintah tambahan, dan dua fungsi wrapper. Singkatnya, inilah alurnya.
#1. Atur Segalanya
npx create-react-app todos cd todos npm i react-easy-state npm start
#2. Tulis Beberapa Kode
Gunakan objek JS untuk status dan komponen React untuk tampilan. Pastikan untuk membungkusnya dengan store
dan view
masing-masing. Untuk injeksi ketergantungan, gunakan impor ES6 dan props React.
#3. Istirahat
Bersantailah dan nikmati hasil usaha Anda. Anda dapat menemukan contoh TodoMVC yang sedikit lebih rumitdi sinidengan demo langsung.
Kesimpulan
Kami menggunakan "Buat Aplikasi React" (oleh @"dan_abramov") dan "React Easy State" (oleh saya sendiri) untuk memulai perjalanan ini. Silakan tunjukkan dukungan Anda dengan memeriksanya, jika menurut Anda artikel tersebut menarik.
Di episode berikutnya saya akan meningkatkan Aplikasi dengan beberapa perutean. Saya berencana untuk menulis solusi saya sendiri lagi, tetapi saya mungkin menemukan beberapa router yang bagus sebelum itu. Jangan ragu untuk merekomendasikan favorit Anda di komentar!