React

ไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานงานผู้ใช้

Declarative

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

มุมมองแบบ declarative ทำให้โค้ดของคุณคาดการณ์ได้และง่ายต่อการดีบั๊ก

Component-Based

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

เมื่อลอจิกของคอมโพแนนท์ถูกเขียนด้วยจาวาสคริปต์แทนที่จะใช้เทมเพลต คุณสามารถส่งข้อมูลที่หลากหลายผ่านแอพพลิเคชันของคุณและรักษาสถานะของ DOM

Learn Once, Write Anywhere

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

<<<<<<< HEAD React สามารถเรนเดอร์ได้บนเซิร์ฟเวอร์ด้วย Node และสร้างแอพพลิเคชันมือถือได้ด้วย React Native. ======= React can also render on the server using Node and power mobile apps using React Native.

2ef0ee1e4fc4ce620dce1f3e0530471195dc64d1


A Simple Component

React คอมโพเนนท์สร้างด้วยเมธอด render() ที่รับค่าข้อมูลอินพุตและส่งกลับข้อมูลที่ไปแสดงผล ตัวอย่างนี้ใช้รูปแบบภาษาที่เหมือน XML ที่เรียกว่า JSX ข้อมูลอินพุตที่ส่งผ่านเข้าไปในคอมโพแนนท์สามารถเข้าถึง render() ได้ด้วย this.props

JSX เป็นตัวเลือกและไม่จำเป็นสำหรับ React ลอง Babel REPL เพื่อดูโค้ดจาวาสคริปต์ที่สร้างด้วยขั้นตอนการคอมไฟล์ JSX

Loading code example...

A Stateful Component

นอกจากจะรับข้อมูล (เข้าถึงด้วย this.props) คอมโพแนนท์สามารถเก็บรักษาข้อมูลสถานะภายใน (เข้าถึงด้วย this.state) เมื่อข้อมูลสถานะของคอมโพแนนท์มีการเปลี่ยนแปลง มาร์กอัปเรนเดอร์จะอัพเดตด้วยการเรียกใช้งาน render() อีกครั้ง

Loading code example...

An Application

ใช้ props และ state เราสามารถรวม Todo แอพพลิเคชันเล็กๆ ไว้ด้วยกัน ตัวอย่างนี้ใช้ state เพื่อติดตามรายการปัจจุบันของรายการเช่นเดียวกับข้อความที่ผู้ใช้งานใส่เข้ามา แม้ว่าตัวจัดการเหตุการณ์ที่แสดงผลอินไลน์ โดยที่จะรวบรวมและสร้างได้ด้วยการใช้ตัวแทนเหตุการณ์

Loading code example...

A Component Using External Plugins

React อนุญาติให้คุณใช้ไลบรารี่และเฟรมเวิร์คอื่นๆ ได้ ตัวอย่างนี้ใช้ remarkable ที่เป็นไลบรารี่ Markdown ภายนอกที่แปลงค่าของ <textarea> ในขณะทำงาน

Loading code example...