สแต็กปฏิกิริยาที่ง่ายที่สุด

การเริ่มต้นระบบและการจัดการสถานะ

ฉันกำลังค้นหา React Stack ที่ง่ายที่สุด จะต้องได้รับการพิสูจน์ในอนาคตและเต็มไปด้วยฟีเจอร์ แต่ที่สำคัญที่สุดคือจะต้องใช้งานง่าย

ในซีรีส์นี้ ฉันจะมองหาโซลูชันที่ใช้งานง่ายเพื่อใช้งาน "React TodoMVC" เวอร์ชันคลาสสิกที่ได้รับการปรับปรุง เมื่อฉันคิดว่าฉันสามารถบรรลุสิ่งที่ง่ายกว่านี้ได้ ฉันจะสร้างไลบรารีตัวช่วยด้วยตัวเอง หัวข้อต่อไปนี้น่าจะครอบคลุมก่อนตอนจบ

• การบูตสแตรปปิ้ง
• การจัดการของรัฐ
• การกำหนดเส้นทาง
• จัดแต่งทรงผม
• เครือข่าย
• การทดสอบ
• โฮสติ้ง

ตอนจะสั้นและ…เรียบง่าย

การบูตสแตรปปิ้งและการรวมกลุ่ม

สร้างแอป React ยากที่จะเอาชนะได้ที่นี่ มันตั้งค่าสารพัดที่ซ่อนอยู่มากมายด้วยคำสั่งเพียงไม่กี่คำสั่งเท่านั้น

npx create-react-app todos
cd todos
npm start

สิ่งนี้จะสร้าง Progressive Web App ออฟไลน์แรกที่รองรับ ES6+, CSS ที่เติมคำนำหน้าอัตโนมัติ และเซิร์ฟเวอร์ที่กำลังรับชม รวมเทคโนโลยีดีๆ ในประโยคเดียว! สุดยอด.

คุณสามารถทดสอบและสร้างโค้ดได้ในภายหลังด้วยคำสั่ง npm test / npm run build หากโปรเจ็กต์ของคุณเติบโตเกินกว่า Create React App เพียงดำเนินการ npm run eject และเข้าควบคุม

แค่นั้นแหละ! ก้าวเข้าสู่การพัฒนาโดยแก้ไขโฟลเดอร์ src — สร้างโดย React Create App

การจัดการของรัฐ

ฝ่ายบริหารของรัฐไม่ใช่ทางเลือกที่ชัดเจนสำหรับฉัน ฉันตัดสินใจทำมือให้สกปรกและเขียนวิธีแก้ปัญหาของตัวเอง มันถูกเรียกว่า React Easy State และนี่คือวิธีการใช้งานของคุณ

#1. การติดตั้ง

npm install react-easy-state

#2. สร้างร้านค้า

ร้านค้าเป็นวัตถุธรรมดาที่มีพลังทั้งหมดของ ES6 มาสร้างหนึ่งใน src/store.js ด้วย todos ที่กรองได้และวิธีการเปลี่ยนรูปแบบ

ตรวจสอบให้แน่ใจว่าได้ล้อมออบเจ็กต์ร้านค้าของคุณด้วย store ก่อนที่จะส่งออก

#3. ปรับเปลี่ยนแอป

ขั้นตอนต่อไปคือการรวมส่วนประกอบ src/App.js ที่มีอยู่เข้ากับที่เก็บสิ่งที่ต้องทำ เพียงนำเข้าร้านค้าและใช้เป็นวัตถุปกติ

ตรวจสอบให้แน่ใจว่าได้รวมส่วนประกอบของคุณด้วย view ก่อนที่จะส่งออก

#4. เพิ่มสิ่งที่ต้องทำ

เพิ่มส่วนประกอบใหม่สำหรับรายการสิ่งที่ต้องทำ คุณสามารถนำเข้าและใช้ร้านค้าเป็นออบเจ็กต์ธรรมดาได้อีกครั้ง

wrapper view จะผูกวิธีการของคุณโดยอัตโนมัติ คุณไม่ต้องกังวลกับการส่งเมธอดเหล่านั้นเป็นการเรียกกลับ

บรรทัดล่าง

เราสร้างแอป TodoMVC เวอร์ชันที่เรียบง่ายด้วย vanilla React คำสั่งพิเศษสองสามคำสั่ง และฟังก์ชัน Wrapper สองฟังก์ชัน นี่คือกระแสโดยสรุป

#1. ตั้งค่าสิ่งต่าง ๆ

npx create-react-app todos
cd todos
npm i react-easy-state
npm start

#2. เขียนโค้ดบางส่วน

ใช้วัตถุ JS สำหรับสถานะและส่วนประกอบ React สำหรับมุมมอง ตรวจสอบให้แน่ใจว่าได้ล้อมด้วย store และ view ตามลำดับ สำหรับการฉีดพึ่งพาให้ใช้การนำเข้า ES6 และอุปกรณ์ประกอบฉาก React

#3. พักผ่อน

เอนหลังและเพลิดเพลินไปกับผลลัพธ์ของความพยายามของคุณ คุณจะพบตัวอย่าง TodoMVC ที่ซับซ้อนกว่าเล็กน้อยได้ที่นี่พร้อมการสาธิตสด

บทสรุป

เราใช้ สร้างแอป React (โดย @dan_abramov) และ React Easy State (ด้วยตัวเอง) เพื่อเริ่มต้นการเดินทางครั้งนี้ โปรดแสดงการสนับสนุนของคุณโดยตรวจสอบหากคุณพบว่าบทความน่าสนใจ

ในตอนต่อไป ฉันจะเพิ่มประสิทธิภาพแอปด้วยการกำหนดเส้นทางบางส่วน ฉันวางแผนที่จะเขียนโซลูชันของตัวเองอีกครั้ง แต่ฉันอาจสะดุดกับเราเตอร์ที่ยอดเยี่ยมก่อนหน้านั้น รู้สึกอิสระที่จะแนะนำสิ่งที่คุณชื่นชอบในความคิดเห็น!