บทช่วยสอนตอบโต้
React เป็นไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้
React ใช้สร้างแอปพลิเคชันหน้าเดียว
React ช่วยให้เราสร้างส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้
เริ่มเรียนรู้ React ตอนนี้ ❯การเรียนรู้จากตัวอย่าง
เครื่องมือ "แสดงปฏิกิริยา" ของเราทำให้สาธิต React ได้ง่าย แสดงทั้งรหัสและผลลัพธ์
ตัวอย่าง:
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));
การเรียนรู้โดยการออกกำลังกาย
ตอบคำถาม
ทดสอบทักษะการโต้ตอบของคุณด้วยแบบทดสอบ
สร้างแอปตอบโต้
ในการเรียนรู้และทดสอบ React คุณควรตั้งค่า React Environment บนคอมพิวเตอร์ของคุณ
บทช่วยสอนนี้ใช้นามสกุลcreate-react-app.
เครื่องมือcreate-react-appนี้เป็นวิธีที่ได้รับการสนับสนุนอย่างเป็นทางการในการสร้างแอปพลิเคชัน React
จำเป็นต้องใช้ Node.jsเพื่อใช้create-react-app.
เปิดเทอร์มินัลของคุณในไดเร็กทอรีที่คุณต้องการสร้างแอปพลิเคชันของคุณ
เรียกใช้คำสั่งนี้เพื่อสร้างแอปพลิเคชัน React ชื่อ
my-react-app:
npx create-react-app my-react-app
create-react-appจะตั้งค่าทุกอย่างที่คุณต้องการเพื่อเรียกใช้แอปพลิเคชัน React
หมายเหตุ:
หากคุณเคยติดตั้งcreate-react-appทั่วโลกมาก่อน ขอแนะนำให้คุณถอนการติดตั้งแพ็คเกจเพื่อให้แน่ใจว่า npx ใช้
create-react-app. หากต้องการถอนการติดตั้ง ให้รันคำสั่งนี้: npm uninstall -g create-react-app.
เรียกใช้แอปพลิเคชัน React
รันคำสั่งนี้เพื่อย้ายไปยังmy-react-appไดเร็กทอรี:
cd my-react-app
รันคำสั่งนี้เพื่อรันแอปพลิเคชัน React
my-react-app:
npm start
หน้าต่างเบราว์เซอร์ใหม่จะปรากฏขึ้นพร้อมกับแอป React ที่สร้างขึ้นใหม่! หากไม่มี ให้เปิดเบราว์เซอร์และพิมพ์
localhost:3000ลงในแถบที่อยู่
ผลลัพธ์:
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับcreate-react-appหัวข้อReact Get Started
สิ่งที่คุณควรรู้อยู่แล้ว
ก่อนที่จะเริ่มต้นด้วย React.JS คุณควรมีประสบการณ์ระดับกลางใน:
- HTML
- CSS
- JavaScript
คุณควรมีประสบการณ์กับคุณลักษณะ JavaScript ใหม่ที่นำมาใช้ใน ECMAScript 6 (ES6) บ้าง คุณจะได้เรียนรู้เกี่ยวกับคุณลักษณะเหล่านี้ในบทReact ES6