ตอนที่ 4: Get to know React

หลังจากสัปดาห์ที่แล้วที่เราติดตั้งตัว Node js ที่เป็น Back End กันเสร็จเรียบร้อย ต่อมาสัปดาห์นี้เราจะลองมาเขียนตัว Hello World กันบนฝั่ง Front End ซึ่งวันนี้เราจะลองใช้ตัว React ซึ่งเป็น Javascript Library ของตัว Facebook

ขั้นตอนแรกเรามาลองติดตั้งตัว Javascript Library กัน

1. สร้าง Folder ที่เก็บ Project React จากนั้น พิมคำสั่งตามนี้

 npm install -g create-react-app
 create-react-app hello-world
 cd hello-world
 npm start

**Npm จะทำการติดตั้ง Library ที่จำเป็นพร้อมทั้งสร้าง Project hello-world ขึ้นมา

2. เมื่อติดตั้งสำเร็จแล้ว Cmd จะบอกว่า Project ของเราจะรันที่ http://localhost:3000/

** ใครได้หน้าตามนี้ถือว่าติดตั้งเสร็จเรียบร้อยแล้วครับ
3. ใน Folder hello-world เราจะได้โครงสร้างที่ประกอบด้วย

node_modules : เป็นที่เก็บตัว Lib ต่างๆของ Project
public : เป็นที่เก็บไฟล์ html เป็นตัวแสดงผลหน้าเว็บ
src : เป็นที่เก็บไฟล์ .js เป็นที่เราจะเขียน Javascript กัน
package.Json : เป็นไฟล์ ที่เก็บข้อมูล Metadata ของ Project พร้อมรายชื่อ node_modules ด้วย

4. อันนี้สำคัญมาก เราจะเขียน Hello World กัน

เข้า Folder src จะพบกับไฟล์ต่างๆ ให้เราแก้ไข ไฟล์ index.js

เข้าไปแก้ไข Code ในส่วน ReactDOM.render ตามด้านล่าง

5. เข้า Cmd และลอง Run Project ของเรากันโดยการกด Shift + คลิกขวา เลือก Open command window here

จากนั้นพิม npm start

รอโปรแกรม Run ซักแปป จะได้หน้า hello world แล้ววววว