ตอบโต้ เริ่มต้น
หากต้องการใช้ React ในการผลิต คุณต้องมี npm ซึ่งรวมอยู่ ในNode.js
หากต้องการทราบภาพรวมว่า React คืออะไร คุณสามารถเขียนโค้ด React ได้โดยตรงในรูปแบบ HTML
แต่หากต้องการใช้ React ในการผลิต คุณต้อง ติดตั้ง npm และ Node.js
โต้ตอบโดยตรงใน HTML
วิธีที่เร็วที่สุดในการเริ่มเรียนรู้ React คือการเขียน React โดยตรงในไฟล์ HTML ของคุณ
W3Schools Spaces
วิธีที่ง่ายที่สุดในการเริ่มต้นสร้างไฟล์ HTML คือ W3Schools Spaces!
เป็นสถานที่ที่สมบูรณ์แบบในการสร้าง แก้ไข และแบ่งปันงานของคุณกับผู้อื่น!
เริ่มต้นด้วยการรวมสามสคริปต์ สองตัวแรกให้เราเขียนโค้ด React ใน JavaScript ของเรา และ Babel ที่สาม ช่วยให้เราสามารถเขียนไวยากรณ์ JSX และ ES6 ในเบราว์เซอร์รุ่นเก่าได้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ JSX ในบทReact JSX
ตัวอย่าง
รวม CDN สามรายการในไฟล์ HTML ของคุณ:
<!DOCTYPE html> <html> <head> <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> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
วิธีการใช้ React นี้สามารถใช้ได้กับวัตถุประสงค์ในการทดสอบ แต่สำหรับการผลิต คุณจะต้องตั้งค่า สภาพแวดล้อม React
การตั้งค่า React Environment
หากคุณติดตั้ง npx และ Node.js ไว้ คุณสามารถสร้างแอปพลิเคชัน React ได้โดยใช้create-react-app.
หากคุณเคยติดตั้งcreate-react-appทั่วโลกมาก่อน ขอแนะนำให้คุณถอนการติดตั้งแพ็คเกจเพื่อให้แน่ใจว่า npx ใช้create-react-app.
หากต้องการถอนการติดตั้ง ให้รันคำสั่งนี้: npm uninstall -g create-react-app.
เรียกใช้คำสั่งนี้เพื่อสร้างแอปพลิเคชัน React ชื่อ
my-react-app:
npx create-react-app my-react-app
จะตั้ง ค่าcreate-react-appทุกอย่างที่คุณต้องการเพื่อเรียกใช้แอปพลิเคชัน React
เรียกใช้แอปพลิเคชัน React
ตอนนี้คุณพร้อมที่จะรันแอปพลิเคชั่น React จริงตัว แรกของคุณแล้ว!
รันคำสั่งนี้เพื่อย้ายไปยังmy-react-appไดเร็กทอรี:
cd my-react-app
รันคำสั่งนี้เพื่อรันแอปพลิเคชัน React
my-react-app:
npm start
หน้าต่างเบราว์เซอร์ใหม่จะปรากฏขึ้นพร้อมกับแอป React ที่สร้างขึ้นใหม่! หากไม่มี ให้เปิดเบราว์เซอร์และพิมพ์
localhost:3000ลงในแถบที่อยู่
ผลลัพธ์:
แก้ไขแอปพลิเคชัน React
จนถึงตอนนี้ดีมาก แต่ฉันจะเปลี่ยนเนื้อหาได้อย่างไร
ดูในmy-react-appไดเร็กทอรีแล้วคุณจะพบ
srcโฟลเดอร์ ภายใน
srcโฟลเดอร์มีไฟล์ชื่อ
App.jsให้เปิดขึ้นมา มันจะมีลักษณะดังนี้:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;ลองเปลี่ยนเนื้อหา HTML และบันทึกไฟล์
โปรดสังเกตว่าการเปลี่ยนแปลงจะปรากฏทันทีหลังจากที่คุณบันทึกไฟล์ คุณไม่จำเป็นต้องโหลดเบราว์เซอร์ซ้ำ!
ตัวอย่าง
แทนที่เนื้อหาทั้งหมดภายใน<div className="App">ด้วย
<h1>องค์ประกอบ
ดูการเปลี่ยนแปลงในเบราว์เซอร์เมื่อคุณคลิกบันทึก
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;ขอให้สังเกตว่าเราได้ลบการนำเข้าที่เราไม่ต้องการ (logo.svg และ App.css)
ผลลัพธ์:
อะไรต่อไป?
ตอนนี้คุณมี React Environment บนคอมพิวเตอร์ของคุณ และคุณพร้อมที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ React แล้ว
ในส่วนที่เหลือของบทช่วยสอนนี้ เราจะใช้เครื่องมือ "แสดงปฏิกิริยา" เพื่ออธิบายแง่มุมต่างๆ ของ React และวิธีที่แสดงในเบราว์เซอร์
หากคุณต้องการทำตามขั้นตอนเดียวกันในคอมพิวเตอร์ของคุณ ให้เริ่มด้วยการดึงsrcโฟลเดอร์ออกเพื่อให้มีไฟล์เพียงไฟล์เดียว: index.js. คุณควรลบบรรทัดโค้ดที่ไม่จำเป็นในindex.js
ไฟล์ออกเพื่อให้ดูเหมือนตัวอย่างในเครื่องมือ "แสดงปฏิกิริยา" ด้านล่าง:
ตัวอย่าง
คลิกปุ่ม "เรียกใช้ตัวอย่าง" เพื่อดูผลลัพธ์
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));