React คืออะไร?
React เป็นไลบรารีJavaScript ที่สร้างโดย Facebook
React เป็น ไลบรารี ส่วนต่อประสานผู้ใช้ (UI)
React เป็นเครื่องมือสำหรับสร้างส่วนประกอบ UI
โต้ตอบบทช่วยสอนการเริ่มต้นอย่างรวดเร็ว
นี่คือบทแนะนำการเริ่มต้นอย่างรวดเร็ว
ก่อนที่คุณจะเริ่ม คุณควรมีความเข้าใจพื้นฐานเกี่ยวกับ:
สำหรับบทช่วยสอนแบบเต็ม:
เริ่มการสอนโต้ตอบ ❯การเพิ่ม React ไปยังหน้า HTML
บทแนะนำการเริ่มต้นอย่างรวดเร็วนี้จะเพิ่ม React ไปยังหน้าดังนี้:
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
บาเบลคืออะไร?
Babel เป็นคอมไพเลอร์ JavaScript ที่สามารถแปลมาร์กอัปหรือภาษาโปรแกรมเป็น JavaScript
ด้วย Babel คุณสามารถใช้คุณสมบัติใหม่ล่าสุดของ JavaScript (ES6 - ECMAScript 2015)
Babel สามารถใช้ได้สำหรับการแปลงที่แตกต่างกัน React ใช้ Babel เพื่อแปลง JSX เป็น JavaScript
โปรดทราบว่าต้องใช้ <script type="text/babel"> เพื่อใช้ Babel
JSX คืออะไร?
JSX ย่อมาจากJ ava S cript X ML
JSX เป็น XML/HTML เหมือนส่วนขยายของ JavaScript
ตัวอย่าง
const element = <h1>Hello World!</h1>
ดังที่คุณเห็นด้านบน JSX ไม่ใช่ JavaScript หรือ HTML
JSX เป็นส่วนขยายไวยากรณ์ XML สำหรับ JavaScript ที่มาพร้อมกับพลังเต็มรูปแบบของ ES6 (ECMAScript 2015)
แท็ก JSX สามารถมีชื่อแท็ก คุณลักษณะ และลูกได้เช่นเดียวกับ HTML หากแอตทริบิวต์อยู่ในวงเล็บปีกกา ค่าจะเป็นนิพจน์ JavaScript
โปรดทราบว่า JSX ไม่ได้ใช้เครื่องหมายคำพูดรอบสตริงข้อความ HTML
ตอบสนอง DOM Render
วิธีการ ReactDom.render() ใช้เพื่อแสดงผล (แสดง) องค์ประกอบ HTML:
ตัวอย่าง
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
นิพจน์ JSX
สามารถใช้นิพจน์ใน JSX ได้โดยการใส่วงเล็บปีกกา{}
ตัวอย่าง
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
องค์ประกอบปฏิกิริยา
แอปพลิเคชัน React มักจะสร้างขึ้นโดยใช้องค์ประกอบ HTMLเดียว
นักพัฒนา React มักจะเรียกสิ่งนี้ว่าโหนด รูท (องค์ประกอบรูท):
<div id="root"></div>
องค์ประกอบปฏิกิริยามีลักษณะดังนี้:
const element = <h1>Hello React!</h1>
องค์ประกอบถูกแสดง (แสดง) ด้วยเมธอด ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
องค์ประกอบปฏิกิริยาจะไม่เปลี่ยนรูป ไม่สามารถเปลี่ยนแปลงได้
วิธีเดียวที่จะเปลี่ยนองค์ประกอบ React คือการสร้างองค์ประกอบใหม่ทุกครั้ง:
ตัวอย่าง
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
ส่วนประกอบปฏิกิริยา
ส่วนประกอบ React คือฟังก์ชัน JavaScript
ตัวอย่างนี้สร้างองค์ประกอบ React ชื่อ "ยินดีต้อนรับ":
ตัวอย่าง
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React ยังสามารถใช้คลาส ES6 เพื่อสร้างส่วนประกอบ
ตัวอย่างนี้สร้างองค์ประกอบ React ชื่อ Welcome ด้วยวิธีการ แสดงผล :
ตัวอย่าง
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
คุณสมบัติของส่วนประกอบที่ทำปฏิกิริยา
ตัวอย่างนี้สร้างองค์ประกอบ React ชื่อ "ยินดีต้อนรับ" พร้อมอาร์กิวเมนต์คุณสมบัติ:
ตัวอย่าง
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React ยังสามารถใช้คลาส ES6 เพื่อสร้างส่วนประกอบ
ตัวอย่างนี้ยังสร้างองค์ประกอบ React ชื่อ "ยินดีต้อนรับ" พร้อมอาร์กิวเมนต์คุณสมบัติ:
ตัวอย่าง
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
คอมไพเลอร์ JSX
ตัวอย่างในหน้านี้รวบรวม JSX ในเบราว์เซอร์
สำหรับรหัสการผลิต ควรทำการคอมไพล์แยกกัน
สร้าง React Application
Facebook ได้สร้างแอปพลิเคชัน Create Reactพร้อมทุกสิ่งที่คุณต้องการเพื่อสร้างแอป React
เป็นเซิร์ฟเวอร์พัฒนา aa ที่ใช้ Webpack เพื่อคอมไพล์ React, JSX และ ES6, ไฟล์ CSS คำนำหน้าอัตโนมัติ
แอป Create React ใช้ ESLint เพื่อทดสอบและเตือนเกี่ยวกับข้อผิดพลาดในโค้ด
ในการสร้างแอป Create React ให้รันโค้ดต่อไปนี้บนเทอร์มินัลของคุณ:
ตัวอย่าง
npx create-react-app react-tutorial
ตรวจสอบให้แน่ใจว่าคุณมี Node.js 5.2 หรือสูงกว่า มิฉะนั้น คุณต้องติดตั้ง npx:
ตัวอย่าง
npm i npx
เริ่มโฟลเดอร์หนึ่งจากตำแหน่งที่คุณต้องการให้แอปพลิเคชันของคุณอยู่:
ตัวอย่าง
C:\Users\myUser>npx create-react-app react-tutorial
ผลสำเร็จ:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start