เริ่มต้นพัฒนา Web App ด้วย ReactJS แบบไม่ต้องใช้ create react app

สำหรับนักพัฒนาเว็บที่ใช้ ReactJS เป็นเครื่องมือ มักจะคุ้นชินกับการใช้ create react app ซึ่งคือชุดคำสั่งเริ่มต้นสำหรับพัฒนาเว็บด้วย ReactJS แต่เราก็สามารถพัฒนา Web Application ด้วย ReactJS โดยไม่ต้องใช้ create react app ได้ดังนี้

1. เปิด Command Prompt สร้าง Folder สำหรับงาน ชื่อ react_web_app ด้วยคำสั่ง md react_web_app

2. สร้างไฟล์ package.json โดยคำสั่ง npm init -y

3. intsall node package babel สำหรับ แปลง jsx ไฟล์ js โดยใช้คำสั่ง npm install @babel/core @babel/cli @babel/preset-react

4. สร้าง Folder src สำหรับ เก็บ source code ไฟล์ .jsx และ Forder js สำหรับ เก็บไฟล์ที่ babel แปลงไฟล์ .jsx เป็น .js โดยใช้คำสั่ง md src และ md js ตามลำดับ

หมายเหตุ ในที่นี้เราจะพัฒนา web app ด้วย React โดยการ เขียน code ในไฟล์ .jsx และใช้ ิbabel แปลงเป็น javascript ในไฟล์ .js อีกที

5. เปิด VS code ด้วย คำสั่ง code -n .

6. สร้างไฟล์ index.html ใน vs code ( คลิกขวา และเลือก new file ตามรูป )

6. เขียน Code html ดังนี้

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My React Web</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    
    <script src="https://unpkg.com/react@latest/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>

</head>
<body>

    <div id="root"></div>
    
    <script src="js/app.js" ></script>

</body>
</html>

7. สร้างไฟล์ app.jsx ที่ folder src โดยคลิกขวาที่ folder src และเลือก new file ตามรูป

8. เขียนคำสั่งสร้างหน้าเว็บด้วย React ดังนี้

function App()
{
    return <div>
        My React Web
    </div>;
}

ReactDOM.render(<App />,document.getElementById("root"));

9. เปิด Command Prompt อีกครั้ง และพิมพ์คำสั่ง

npx babel --watch src --out-dir js --presets @babel/preset-react

คือการแปลง ไฟล์ source code ในไฟล์ src เป็น javascript ( .js ไฟล์ ) ใน folder js

10. เปิด folder D:\react_web_app และเปิดไฟล์ index.html จะได้ หน้าเว็บที่พัฒนาด้วย ReactJS ผลลัพธ์ตามรูป