Cara membuat laman e -dagang dengan reaksi

Tutorial ini membimbing anda melalui membina aplikasi web e-dagang yang mudah menggunakan React. Walaupun bukan pesaing Shopify sepenuhnya, ia secara berkesan menunjukkan keupayaan React untuk mewujudkan antara muka pengguna yang dinamik.

aplikasi ini mempunyai sistem keranjang asas dan pengesahan pengguna. Daripada perpustakaan pengurusan negeri yang kompleks seperti Redux atau Mobx, ia memanfaatkan konteks bertindak balas. Backend mock dicipta menggunakan

dan json-server. Kod Lengkap tersedia di GitHub. json-server-auth

Ciri -ciri & Teknologi Utama:

• React Context: Pengurusan negeri yang dipermudahkan, mengelakkan overhead redux atau mobx.
• Pengesahan Pengguna: Simulasi menggunakan dan JWTS untuk aliran pengesahan yang realistik. json-server-auth
• React Router: Mengendalikan Navigasi Aplikasi.
• axios: Menguruskan permintaan Ajax untuk pengambilan data yang cekap.
• Bulma CSS: Menyediakan UI yang responsif dan visual.
• jwt-decode: Parses JWTS untuk pengesahan selamat.
• Penyimpanan Tempatan: berterusan data pengguna dan kandungan kereta di seluruh sesi.

Prasyarat:

Tutorial ini menganggap asas JavaScript dan React. Sekiranya anda baru bertindak balas, pertimbangkan untuk mengkaji panduan pemula.

Anda memerlukan Node.js dan NPM (Pengurus Pakej Node) yang dipasang. Sahkan pemasangan menggunakan:

node -v
npm -v

Persediaan Projek:

1. Buat projek React baru menggunakan Create React App:

   npx create-react-app e-commerce
   cd e-commerce

2. Pasang pakej yang diperlukan:

   npm install react-router-dom axios json-server json-server-auth jwt-decode bulma

3. Tambah Bulma Stylesheet ke

   : src/index.js

   import "bulma/css/bulma.css";

Konteks dan struktur komponen:

Tutorial menggunakan konteks React untuk pengurusan negeri. Fail

membuat konteks, dan Context.js menyediakan komponen pesanan yang lebih tinggi untuk menyuntik konteks dengan mudah ke dalam komponen. Komponen Asas (withContext.js, AddProduct, Cart, Login) dicipta untuk menyusun aplikasi. ProductList

Persediaan backend palsu:

fail

(terletak di direktori db.json) mentakrifkan pangkalan data mock untuk pengguna dan produk. Mulakan backend dengan pengesahan: json-server

./node_modules/.bin/json-server-auth ./backend/db.json --port 3001

Ini menubuhkan API REST di

. http://localhost:3001

Pelaksanaan pengesahan:

komponen App.js mengendalikan pengesahan pengguna menggunakan axios dan jwt-decode. Kaedah login membuat permintaan pos kepada /login, menguraikan JWT, dan menyimpan maklumat pengguna dalam storan negeri dan tempatan. Kaedah logout membersihkan data ini. Komponen Login menyediakan antara muka pengguna untuk log masuk.

Pandangan Produk dan Pengurusan CART:

komponen ProductList mengambil dan memaparkan produk. ProductItem menjadikan kad produk individu. Kaedah addToCart, removeFromCart, dan clearCart menguruskan keranjang belanja, berterusan data dalam storan tempatan. Komponen Cart memaparkan kandungan kereta, menggunakan CartItem untuk item individu. Kaedah checkout mensimulasikan checkout dengan mengemas kini stok produk dalam backend mock. Komponen AddProduct membolehkan pengguna admin menambah produk baru.

Kesimpulan:

Tutorial ini menyediakan aplikasi e-dagang asas yang dibina dengan React. Penambahbaikan selanjutnya boleh termasuk backend yang mantap, pengesahan sisi pelayan, dan ciri-ciri yang lebih canggih. Ingat, kod lengkap boleh didapati di GitHub. Untuk pembangunan React yang lebih maju, meneroka corak reka bentuk React dan amalan terbaik di SitePoint Premium.

Atas ialah kandungan terperinci Cara membuat laman e -dagang dengan reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!