5 ข้อผิดพลาดที่ฉันทำเมื่อเริ่มโครงการตอบโต้ครั้งแรก

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

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

นั่นคือสิ่งที่บทความนี้เป็น - รายการข้อผิดพลาดที่ฉันทำ ฉันหวังว่าสิ่งเหล่านี้จะช่วยให้การเรียนรู้ React ราบรื่นขึ้นสำหรับคุณ

การใช้แอป create-react-app เพื่อเริ่มโครงการ

TL;DR ใช้ Vite หรือ Parcel

สร้างแอป React (CRA) เป็นเครื่องมือที่ช่วยให้คุณตั้งค่าโครงการ React ใหม่ สร้างสภาพแวดล้อมการพัฒนาด้วยตัวเลือกการกำหนดค่าที่ดีที่สุดสำหรับโครงการ React ส่วนใหญ่ ซึ่งหมายความว่าคุณไม่ต้องเสียเวลากำหนดค่าอะไรเอง

ในฐานะผู้เริ่มต้น นี่เป็นวิธีที่ดีในการเริ่มงานของฉัน! ไม่มีการกำหนดค่า! เริ่มเขียนโค้ดได้เลย!

CRA ใช้แพ็คเกจยอดนิยมสองแพ็คเกจเพื่อให้บรรลุเป้าหมายนี้ webpack และ Babel webpack เป็นเว็บบันเดิลที่เพิ่มประสิทธิภาพเนื้อหาทั้งหมดในโครงการของคุณ เช่น JavaScript, CSS และรูปภาพ Babel เป็นเครื่องมือที่ช่วยให้คุณสามารถใช้คุณสมบัติ JavaScript ที่ใหม่กว่า แม้ว่าบางเบราว์เซอร์จะไม่รองรับก็ตาม

ทั้งคู่ดี แต่มีเครื่องมือใหม่ที่สามารถทำงานได้ดีกว่าโดยเฉพาะ ชีวิต และ คอมไพเลอร์เว็บที่รวดเร็ว (ม.ป.ป).

ทางเลือกใหม่ที่ได้รับการปรับปรุงเหล่านี้เร็วกว่าและง่ายกว่าในการกำหนดค่ามากกว่า webpack และ Babel ทำให้ง่ายต่อการปรับการกำหนดค่าซึ่งทำได้ยากในแอป create-react-app โดยไม่ต้องดีดออก

หากต้องการใช้ทั้งสองอย่างเมื่อตั้งค่าโครงการ React ใหม่ คุณต้องแน่ใจว่ามี โหนด ติดตั้งเวอร์ชัน 12 ขึ้นไป แล้วรันคำสั่งต่อไปนี้

npm create vite

คุณจะถูกขอให้เลือกชื่อสำหรับโครงการของคุณ เมื่อคุณทำเสร็จแล้ว ให้เลือก React จากรายการเฟรมเวิร์ก หลังจากนั้นคุณสามารถเลือกอย่างใดอย่างหนึ่ง Javascript + SWC or Typescript + SWC

จากนั้นคุณจะต้องเปลี่ยนไดเร็กทอรี cd ในโครงการของคุณและเรียกใช้คำสั่งต่อไปนี้

npm i && npm run dev

สิ่งนี้ควรเรียกใช้เซิร์ฟเวอร์การพัฒนาสำหรับไซต์ของคุณด้วย URL localhost:5173

และมันก็ง่ายเหมือนกัน

การใช้ defaultProps สำหรับค่าเริ่มต้น

TL; DR ใช้พารามิเตอร์ฟังก์ชันเริ่มต้นแทน

ข้อมูลสามารถส่งผ่านไปยังส่วนประกอบ React ผ่านสิ่งที่เรียกว่า props. สิ่งเหล่านี้ถูกเพิ่มเข้าไปในคอมโพเนนต์เช่นเดียวกับแอตทริบิวต์ในองค์ประกอบ HTML และสามารถใช้ในคำจำกัดความของคอมโพเนนต์ได้โดยการรับค่าที่เกี่ยวข้องจากออบเจกต์ prop ที่ส่งผ่านเป็นอาร์กิวเมนต์

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

หากจำเป็นต้องใช้ค่าเริ่มต้นสำหรับ a propที่ defaultProp สามารถใช้คุณสมบัติ:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

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

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

สิ่งนี้เป็นที่นิยมมากกว่าเนื่องจากโค้ดที่เบราว์เซอร์สมัยใหม่สามารถอ่านได้โดยไม่ต้องแปลงเพิ่มเติม

น่าเสียดาย, defaultProps ต้องการให้เบราว์เซอร์อ่านการแปลงเนื่องจากไม่รองรับ JSX (JavaScript XML) ทันที สิ่งนี้อาจส่งผลต่อประสิทธิภาพของแอปพลิเคชันที่ใช้งานจำนวนมาก defaultProps.

อย่าใช้ propTypes

TL; DR ใช้ TypeScript

ในการตอบสนอง, the propTypes คุณสมบัติสามารถใช้เพื่อตรวจสอบว่าส่วนประกอบถูกส่งผ่านประเภทข้อมูลที่ถูกต้องสำหรับอุปกรณ์ประกอบฉากหรือไม่ พวกเขาให้คุณระบุประเภทของข้อมูลที่ควรใช้สำหรับแต่ละพร็อพ เช่น สตริง ตัวเลข ออบเจกต์ ฯลฯ นอกจากนี้ยังช่วยให้คุณระบุว่าจำเป็นต้องใช้พร็อพหรือไม่

ด้วยวิธีนี้ ถ้าคอมโพเนนต์ถูกส่งผ่านข้อมูลผิดประเภท หรือหากไม่ได้จัดเตรียมพร็อพที่จำเป็น React จะส่งข้อผิดพลาดออกมา

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

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

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript เป็นภาษาโปรแกรมที่สร้างจาก JavaScript โดยเพิ่มการตรวจสอบประเภทแบบคงที่ TypeScript จัดเตรียมระบบประเภทที่มีประสิทธิภาพมากขึ้น ซึ่งสามารถจับจุดบกพร่องที่อาจเกิดขึ้นได้มากขึ้นและปรับปรุงประสบการณ์การพัฒนา

การใช้ส่วนประกอบของคลาส

TL; DR: เขียนส่วนประกอบเป็นฟังก์ชัน

ส่วนประกอบของคลาสใน React ถูกสร้างขึ้นโดยใช้คลาส JavaScript พวกเขามีโครงสร้างเชิงวัตถุมากขึ้นและมีคุณสมบัติเพิ่มเติมบางอย่าง เช่น ความสามารถในการใช้ this วิธีคำหลักและวงจรชีวิต

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

ฉันชอบเขียนส่วนประกอบด้วยคลาสมากกว่าฟังก์ชัน แต่คลาส JavaScript นั้นยากกว่าสำหรับผู้เริ่มต้นที่จะเข้าใจและ this อาจทำให้สับสนได้ ฉันขอแนะนำให้เขียนส่วนประกอบเป็นฟังก์ชันแทน:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

ส่วนประกอบของฟังก์ชันเป็นเพียงฟังก์ชัน JavaScript ที่ส่งคืน JSX อ่านง่ายกว่ามาก และไม่มีฟีเจอร์เพิ่มเติมเช่น this คำหลักและ วิธีวงจรชีวิต ซึ่งทำให้มีประสิทธิภาพมากกว่าส่วนประกอบของคลาส

ส่วนประกอบของฟังก์ชันยังมีข้อได้เปรียบในการใช้ตะขอ ตอบสนองตะขอ อนุญาตให้คุณใช้สถานะและคุณลักษณะ React อื่นๆ โดยไม่ต้องเขียนส่วนประกอบของคลาส ทำให้โค้ดของคุณสามารถอ่านได้มากขึ้น บำรุงรักษาได้ และนำมาใช้ซ้ำได้

การนำเข้าการตอบสนองโดยไม่จำเป็น

TL; DR: ไม่จำเป็นต้องทำ เว้นแต่คุณต้องการขอเกี่ยว

เนื่องจาก React 17 เปิดตัวในปี 2020 ตอนนี้คุณไม่จำเป็นต้องนำเข้า React ที่ด้านบนของไฟล์ทุกครั้งที่คุณสร้างส่วนประกอบ

import React from 'react'; // Not needed!
export default function Card() {}

แต่เราต้องทำก่อน React 17 เพราะตัวแปลง JSX (สิ่งที่แปลง JSX เป็น JavaScript ปกติ) ใช้วิธีการที่เรียกว่า React.createElement ซึ่งจะใช้ได้เฉพาะเมื่อนำเข้า React ตั้งแต่นั้นเป็นต้นมา มีการเปิดตัว Transformer ตัวใหม่ซึ่งสามารถแปลง JSX ได้โดยไม่ต้องใช้ createElement วิธี

คุณยังคงต้องนำเข้า React เพื่อใช้ hooks เศษและฟังก์ชันหรือคอมโพเนนต์อื่นๆ ที่คุณอาจต้องการจากไลบรารี:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

นั่นเป็นความผิดพลาดของฉันตั้งแต่เนิ่นๆ!

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

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

หากคุณใช้ React มาระยะหนึ่ง คุณต้องการรู้อะไรก่อนที่จะเริ่มใช้งานบ้าง จะเป็นการดีหากได้รับคอลเลคชันเพื่อช่วยให้ผู้อื่นหลีกเลี่ยงปัญหาเดียวกัน

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/5-mistakes-starting-react/