fb_ads

www.รับเขียนโปรแกรม.net รับเขียนโปรแกรม ระบบต่างๆ เช่น ระบบข้อมูลบุคคล ระบบข้อมูลลูกค้า ระบบซื้อขาย คลังสินค้า ระบบเช่าจอง ทำงานบน Website ด้วย PHP MySql NodeJs HTML5 JavaScript Ajax

เริ่มต้นพัฒนา 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" />
    <!--  เรีกยกใช้ React Library -->
    <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>
    <!-- babel จะสร้าง ไฟล์ app.js จากไฟล์ app.jsx  -->
    <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 ผลลัพธ์ตามรูป