ReactJS จริงๆแล้ว คือะไร?

React เป็น Javascript Library ที่ทีม Facebook เป็นคนพัฒนาขึ้นมา สำหรับสร้าง User Interface

React จะทำงานเป็น Component คือ การแยกส่วนต่างๆ ของเว็บเป็นส่วนย่อย เช่น Button, Navbar, Text, Image เป็นต้น

React รองรับการเขียนแบบ JSX — Javascript syntax extension โดยปกติจะเขียนเว็บแบบแยกส่วน Javascript กับ HTML แต่ JSX จะสามารถเขียน tags ไปใน Javascript ได้เลย

เริ่มต้นสร้าง React App

การติดตั้ง React สามารถติดตั้งได้ผ่าน Node JS โดยใช้คำสั่ง npm

Version: React 16.4.1 and Node 8.10.0

$ npm install -g create-react-app
$ create-react-app app-name

สำหรับ npm version 5.2.0+ ใช้คำสั่ง npx :

$ npx create-react-app app-name

เมื่อสร้าง app เสร็จเรียบร้อยแล้ว

$ cd app-name

ใน directory app มีอะไร?

จะมีไฟล์หลักๆ ที่ใช้พัฒนาคือ src/App.js

จาก code ที่เห็นในไฟล์ App.js มี component ชื่อ App ซึ่งจะมีการ render เป็น HTML ออกมาแสดงบนหน้าเว็บ เนื่องจากไฟล์นี้เป็น component จึงต้องทำการ export เพื่อไฟล์อื่นที่จะเรียกใช้มองเห็น component App

Note:ใน 1 component สามารถมีได้แค่ 1 root node เท่านั้น

ไฟล์ต่อไปคือ src/index.js

จากโค้ดจะเห็นได้ว่ามีการรับ element ที่มี id ชื่อว่า root แล้วให้ render component ที่ชื่อว่า App ไปแสดงบนหน้าเว็บ

Get Sirima Insorn’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

อีกหนึ่งไฟล์หลักที่สำคัญคือ pubilc/index.html

จากโค้ดในไฟล์ index.js จะเห็นว่ามีการประกาศ id=”root” เพื่อ render component App ออกมาแสดงภายใต้ div นี้

ทดลอง run app ด้วยคำสั่ง npm

$ npm start

หน้าเว็บจะเปิดขึ้นอัตโนมัติ

หน้าเว็บ เมื่อ run เสร็จ

พบกันได้ใหม่ในบทความต่อไปนะค่ะ~