บทแนะนำการสร้างเว็บแอปพลิเคชันโดยใช้ React.js

React.js เป็นไลบรารีสำหรับการพัฒนาฝั่ง front-end ที่ได้รับความนิยม ใช้ในการสร้างส่วนติดต่อผู้ใช้ (UI) แบบโต้ตอบได้ พัฒนาโดย Facebook และถูกนำไปใช้โดยบริษัทใหญ่ๆ หลายแห่ง รวมถึง Instagram, Airbnb และ WhatsApp หากคุณกำลังมองหาเครื่องมือสร้างเว็บแอปพลิ เคชันที่มีประสิทธิภาพ รวดเร็ว และตอบสนองได้ดี React.js อาจเป็นตัวเลือกที่เหมาะสมสำหรับคุณ

เพนดาฮูหวน

ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js และ npm (Node Package Manager) ไว้ในคอมพิวเตอร์ของคุณแล้ว Node.js และ npm เป็นสิ่งจำเป็น เนื่องจากเป็นตัวจัดเตรียมสภาพแวดล้อมและเครื่องมือที่จำเป็นสำหรับการพัฒนาเว็บแอปพลิเคชันโดยใช้ React.js

ขั้นตอนที่ 1: การเริ่มต้นโปรเจ็กต์ React

ในการสร้างแอปพลิเคชัน React.js ใหม่ เราสามารถใช้ Create React App ซึ่งเป็นเครื่องมือสร้างแอปพลิเคชันที่ลดการตั้งค่าเริ่มต้นให้น้อยที่สุด รันคำสั่งต่อไปนี้ในเทอร์มินัลหรือพรอมต์คำสั่งของคุณ:

“`ทุบตี
npx create-react-app แอปของฉัน
ซีดีแอปของฉัน
เริ่ม npm
““

คำสั่งนี้จะสร้างไดเร็กทอรีใหม่ชื่อ `my-app` ดาวน์โหลดและติดตั้งส่วนประกอบที่จำเป็นทั้งหมด และเริ่มต้นเซิร์ฟเวอร์สำหรับการพัฒนา ตอนนี้คุณสามารถเปิดเบราว์เซอร์และเข้าถึง `http://localhost:3000` เพื่อดูแอปพลิเคชัน React.js เริ่มต้นได้แล้ว

ขั้นตอนที่ 2: โครงสร้างโฟลเดอร์

ลองมาดูโครงสร้างโฟลเดอร์ที่ Create React App สร้างขึ้นกัน:

““
แอปของฉัน/
├── node_modules/
├── สาธารณะ/
│ └── index.html
└── แหล่งที่มา/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
““

– `node_modules/`: โฟลเดอร์ที่รวบรวมไลบรารีที่จำเป็นสำหรับโปรเจ็กต์ของคุณ
– `public/`: ประกอบด้วยไฟล์คงที่ รวมถึง `index.html` ซึ่งเป็นจุดเริ่มต้นของแอปพลิเคชัน
– `src/`: โฟลเดอร์ที่คุณจะใช้เวลาอยู่มากที่สุด ประกอบด้วยคอมโพเนนต์ React ไฟล์ CSS และสินทรัพย์อื่นๆ

ขั้นตอนที่ 3: การลบไฟล์ที่ไม่จำเป็น

เพื่อเริ่มต้นใหม่ด้วยความสะอาดหมดจด เรามาลบไฟล์ที่ไม่จำเป็นออกก่อน ลบไฟล์ `logo.svg` และ `App.test.js` ในโฟลเดอร์ `src/` จากนั้น เปิดไฟล์ `App.css` และ `index.css` แล้วลบโค้ด CSS ทั้งหมดที่อยู่ภายใน เพื่อเริ่มต้นด้วยสไตล์ชีตที่สะอาดหมดจด

ขั้นตอนที่ 4: การสร้างส่วนประกอบแรกของคุณ

React.js เป็นภาษาโปรแกรมที่ใช้คอมponent เป็นหลัก คอมponent คือส่วนประกอบพื้นฐานของเว็บแอปพลิเคชันของคุณ มาแก้ไขไฟล์ `App.js` เพื่อสร้างคอมponent แรกของเรากัน

เปิดไฟล์ `src/App.js` แล้วแทนที่ด้วยโค้ดต่อไปนี้:

“`jsx
นำเข้า React จาก 'react';
นำเข้า './App.css';

แอปฟังก์ชัน () {
ผลตอบแทน (

);
}

ส่งออกแอปเริ่มต้น
““

เริ่มต้นใช้งานโค้ด React ภายในไฟล์ `App.js` โดยใช้ JSX (JavaScript XML) ซึ่งช่วยให้เราสามารถเขียนไวยากรณ์คล้าย HTML ภายใน JavaScript ได้ บันทึกการเปลี่ยนแปลงและดูผลลัพธ์ในเบราว์เซอร์ของคุณ

ขั้นตอนที่ 5: การเพิ่มส่วนประกอบใหม่

ต่อไปเรามาเพิ่มส่วนประกอบใหม่กัน สร้างโฟลเดอร์ใหม่ชื่อ `components` ภายในโฟลเดอร์ `src` จากนั้นสร้างไฟล์ใหม่ชื่อ `HelloWorld.js` ในโฟลเดอร์ `components`

“`jsx
นำเข้า React จาก 'react';

ฟังก์ชัน HelloWorld() {
ผลตอบแทน (

);
}

ส่งออกค่าเริ่มต้น HelloWorld;
““

เปิดไฟล์ `App.js` แล้วนำเข้าคอมโพเนนต์ `HelloWorld` ที่เราเพิ่งสร้างขึ้น:

“`jsx
นำเข้า React จาก 'react';
นำเข้า './App.css';
import HelloWorld from './components/HelloWorld';

แอปฟังก์ชัน () {
ผลตอบแทน (

);
}

ส่งออกแอปเริ่มต้น
““

ตอนนี้ไฟล์ `App.js` แสดงผลคอมโพเนนต์ `HelloWorld` บนหน้าหลักแล้ว

ขั้นตอนที่ 6: เพิ่มการจัดการสถานะด้วย useState

React มี hooks ที่ทรงพลังมากสำหรับการจัดการสถานะ มาเพิ่มสถานะให้กับแอปพลิเคชันของเรากัน ตัวอย่างเช่น เราจะเพิ่มตัวนับที่จะเพิ่มขึ้นทุกครั้งที่มีการคลิกปุ่ม

เปิดไฟล์ `HelloWorld.js` แล้วเพิ่ม state และ hook `useState` เข้าไป:

“`jsx
นำเข้าปฏิกิริยา { useState } จาก 'ปฏิกิริยา';

ฟังก์ชัน HelloWorld() {
const [นับ setCount] = useState (0);

const incrementCount = () => {
setCount(นับ + 1);
}

ผลตอบแทน (

);
}

ส่งออกค่าเริ่มต้น HelloWorld;
““

สถานะ `count` จะถูกกำหนดค่าเริ่มต้นเป็น 0 และทุกครั้งที่คลิกปุ่ม ฟังก์ชัน `incrementCount` จะเพิ่มค่านี้ขึ้น

ขั้นตอนที่ 7: การเพิ่มสไตล์

ในการเพิ่มสไตล์ เราสามารถใช้ CSS ในไฟล์ `App.css` หรือใช้ไลบรารี CSS-in-JS เช่น styled-components ก็ได้ แต่ในตอนนี้เราจะใช้ CSS มาตรฐานกันก่อน

เปิดไฟล์ `App.css` แล้วเพิ่มสไตล์การตกแต่งลงไป:

“`ซีเอส
.แอป {
text-align: center;
}

.App-header {
สีพื้นหลัง: 282c34;
ความสูงขั้นต่ำ: 100vh;
แสดงผล: ดิ้น;
ดิ้นทิศทาง: คอลัมน์;
จัดเรียงรายการ: กึ่งกลาง;
ปรับเนื้อหา: ศูนย์;
ขนาดตัวอักษร: คำนวณ (10 พิกเซล + 2vmin);
สี: ขาว;
}

ปุ่ม {
padding: 10px 20px;
margin-top: 20px;
ขนาดตัวอักษร: 16px;
}
““

ขั้นตอนที่ 8: การเพิ่มการกำหนดเส้นทางด้วย React Router

เพื่อเพิ่มการนำทางระหว่างหน้าต่างๆ ในแอปพลิเคชันของเรา เราสามารถใช้ React Router ได้ ติดตั้ง React Router โดยรันคำสั่งต่อไปนี้:

“`ทุบตี
npm ติดตั้ง react-router-dom
““

จากนั้น สร้างคอมโพเนนต์ใหม่สองตัว ได้แก่ `Home.js` และ `About.js` ในโฟลเดอร์ `components`

`Home.js`:
“`jsx
นำเข้า React จาก 'react';

ฟังก์ชั่นโฮม () {
ผลตอบแทน (

);
}

ส่งออกหน้าแรกเริ่มต้น;
““

`About.js`:
“`jsx
นำเข้า React จาก 'react';

ฟังก์ชั่นเกี่ยวกับ () {
ผลตอบแทน (

);
}

ค่าเริ่มต้นการส่งออก เกี่ยวกับ;
““

ถัดไป เปิดไฟล์ `App.js` และตั้งค่าการกำหนดเส้นทาง:

“`jsx
นำเข้า React จาก 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
นำเข้า './App.css';
import HelloWorld from './components/HelloWorld';
นำเข้าหน้าแรกจาก './components/Home';
นำเข้าเกี่ยวกับจาก './components/About';

แอปฟังก์ชัน () {
ผลตอบแทน (

);
}

ส่งออกแอปเริ่มต้น
““

ด้วยเหตุนี้ เราจึงได้เพิ่มระบบนำทางพื้นฐานระหว่างหน้าต่างๆ ในแอปพลิเคชันของเรา

ปิด

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

ขอให้โชคดี และหวังว่าบทช่วยสอนนี้จะช่วยให้คุณเริ่มต้นการเรียนรู้ React.js ได้!