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!