React เป็นกรอบงานหรือไม่?

ตามหน้า Landing Pageของ React, มันเป็นห้องสมุด JavaScript เพื่อสร้างการเชื่อมต่อผู้ใช้ ไม่ใช่เฟรมเวิร์ก แต่เป็นไลบรารี

Angular, Vue, Next.js, Gatsby, Redwood.js เป็นต้น เป็นตัวอย่างสำหรับเฟรมเวิร์ก กรอบงานประกอบด้วยทรัพยากรที่แอปพลิเคชันขนาดใหญ่อาจต้องการ : การสร้างแบบฟอร์ม เรียกใช้การทดสอบอัตโนมัติ การส่งคำขอเครือข่าย ฯลฯ

ในขณะที่ React ไม่ได้รวมฟังก์ชันเหล่านี้ไว้มากมาย Core react ถูกใช้เพื่อสร้างส่วนต่อประสานผู้ใช้เท่านั้น ในการสร้างแอปพลิเคชัน React ที่สมบูรณ์ คุณจะต้องเลือกแพ็คเกจและเครื่องมือที่จำเป็นด้วยตัวเอง ตัวอย่างเช่น สำหรับแบบฟอร์มและการตรวจสอบความถูกต้องของ React Hook Form หรือ Formik สามารถใช้และสำหรับการทดสอบ React Testing Library หรือ Jest ได้

คุณสมบัติของ React

ตามส่วนประกอบ

ใน React หน้าเว็บสามารถแบ่งออกเป็นบล็อกที่ถูกห่อหุ้มของโค้ดที่เรียกว่าส่วนประกอบ ส่วนประกอบเหล่านี้สามารถประกอบขึ้นเพื่อสร้าง UI ที่ซับซ้อนได้ ตรรกะของคอมโพเนนต์เขียนด้วย JavaScript แทนที่จะเป็นเทมเพลตใน React ข้อมูลที่จำเป็นสามารถส่งผ่านไปยังเว็บแอปผ่านส่วนประกอบเหล่านี้ได้อย่างง่ายดาย ซึ่งแสดงตามการเปลี่ยนแปลง

ประกาศ

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

เรียนรู้ครั้งเดียว เขียนได้ทุกที่

สามารถใช้ React ร่วมกับเทคโนโลยีหลายๆ กองได้ ดังนั้นคุณจึงสามารถพัฒนาคุณลักษณะใหม่ใน React ได้โดยไม่ต้องเขียนโค้ดที่มีอยู่ใหม่ React ยังสามารถแสดงผลบนเซิร์ฟเวอร์โดยใช้ Node และสามารถขับเคลื่อนแอพมือถือโดยใช้ React Native

เพิ่ม React ไปยังเว็บไซต์

คุณสามารถเพิ่ม React ในส่วนเล็ก ๆ บนเว็บไซต์ของคุณแล้วค่อยขยายการแสดงตน

ขั้นตอนที่ 1 : เพิ่มคอนเทนเนอร์ DOM ให้กับ HTML

เปิดหน้า HTML ที่คุณต้องการแก้ไขและเพิ่มแท็ก <div> ว่างเพื่อทำเครื่องหมายจุดที่คุณต้องการแสดงบางอย่างด้วย React

แอตทริบิวต์ id HTML ที่ไม่ซ้ำกันมอบให้กับ div ซึ่งจะช่วยให้เราค้นหาได้จากโค้ด JavaScript ในภายหลังและแสดงองค์ประกอบ React ภายใน คุณสามารถวาง “container” <div> แบบนี้ได้ทุกที่ภายในแท็ก <body> คุณอาจมีคอนเทนเนอร์ DOM อิสระในหน้าเดียวได้มากเท่าที่คุณต้องการ โดยปกติแล้วจะว่างเปล่า — React จะแทนที่เนื้อหาที่มีอยู่ภายในคอนเทนเนอร์ DOM

<!--… existing HTML … -->
<div id='name-container'></div>
<!-- … existing HTML … -->

คุณจะต้องเพิ่มแท็ก <script> สามแท็กในหน้า HTML ก่อนแท็กปิด </body> สองแท็กแรกโหลด React อันที่สามจะโหลดโค้ดส่วนประกอบของคุณ

<!-- … other HTML … -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="name_component.js"></script>

สร้างไฟล์ชื่อ name_container.js รหัสนี้กำหนดองค์ประกอบ React ที่เรียกว่า NameContainer

‘use strict’;
const e = React.createElement;

class NameContainer extends React.Component {
  render() {
    return e(‘div’,null,’Joe’);
  }
}
const domContainer = document.querySelector(‘#name-container’);
ReactDOM.render(e(NameContainer), domContainer);

• ประเภท : div, h1, p, span เป็นต้น
• [อุปกรณ์ประกอบฉาก] : class, id, onClck เป็นต้น
• […ลูก] : สตริง องค์ประกอบ DOM อื่น

• องค์ประกอบที่จะแสดงผล
• Dom Container ที่ควรแสดงผล

ในตัวอย่างก่อนหน้านี้ เราอาศัยเฉพาะคุณลักษณะที่เบราว์เซอร์รองรับเท่านั้น นี่คือเหตุผลที่เราใช้การเรียกฟังก์ชัน JavaScript เพื่อบอก React ว่าจะแสดงอะไร: อย่างไรก็ตาม React ยังเสนอตัวเลือกให้ใช้ JSX แทน แม้ว่า JSX จะเป็นทางเลือกอย่างสมบูรณ์ แต่หลายคนพบว่าการเขียนโค้ด UI มีประโยชน์ เพิ่มแท็ก <script> นี้ในหน้าของคุณและคุณสามารถใช้ JSX ในแท็ก <script> โดยเพิ่ม type=”text/babel”

<script src=”https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src=”name_component.js” type=”text/babel”></script>

‘use strict’;
const e = React.createElement;
class NameContainer extends React.Component {
  render() {
    return <div>Joe</div>
  }
}
const domContainer = document.querySelector(‘#name-container’);
ReactDOM.render(e(NameContainer), domContainer);

ทีมงาน React แนะนำวิธีแก้ปัญหาเหล่านี้เป็นหลัก:

• Create React App : หากคุณกำลังเรียนรู้ React หรือสร้างแอปหน้าเดียวใหม่
• Next.js :หากคุณกำลังสร้างเว็บไซต์ที่สร้างโดยเซิร์ฟเวอร์ด้วย Node.js
• แกสบี้ :หากคุณกำลังสร้างเว็บไซต์ที่เน้นเนื้อหาแบบคงที่
• อื่นๆ : Neutrino, Nx, Parcel, Razzle

คุณจะต้องมีโหนด >= 14.0.0 และ npm >= 5.6 บนเครื่องของคุณ

ในการสร้างโปรเจ็กต์ ให้รัน:

npx create-react-app my-app
cd my-app
npm start

ตรวจสอบบล็อกของฉันเกี่ยวกับเคล็ดลับ JavaScript 4 JavaScript สำหรับโค้ดที่สั้นลง