Create Project React EP.1/2

การสร้างส่วนติดต่อกับผู้ใช้ โดยใช้ React [create-react-app folderName]

สิ่งที่เราจะต้องเตรียมในการเขียนโค้ด

1 . ติดตั้ง Node.js //เพื่อเป็นเครื่องมือสำหรับจัดการแพ็กเกจที่อยู่ในแอพพลิเคชัน .เราใช้เป็นตัวน้ี 12.13.1 LTS เพราะมันฟรีนั่นเอง

https://nodejs.org/en/

2 . ติดตั้ง Visual Studio Code //เพื่อเป็นโปรแกรมสำหรับเขียนโค้ด .

https://code.visualstudio.com/

3 . ติดตั้ง React Developer Tools และ Redux DevTools บน Google Chrome //เพื่อเอาไว้ตรวจสอบการทำงานของ React บนเบารว์เซอร์ .

React Developer Tools

Redux DevTools

4. ติดตั้ง create-react-app //เพื่อเป็นเครื่องมือ ช่วนให้เราสามารถสร้างและทดสอบ React ได้ง่ายๆ ด้วยคำสั่ง [npm install -g create-react-app]; ที่ Terminal และสามารถตรวจสอบเวอร์ชันด้วยคำสั่ง [create-react-app --version]

$ npm install -g create-react-app

ตรวจสอบเวอร์ชัน

$ create-react-app -- version

การสร้างและทดสอบแอพพลิเคชัน React ครั้งแรก

1 . เปิด Terminal cd เข้าไปในโฟลเดอร์ที่ต้องการเก็บ

cd เข้าไปจนกว่าจะโฟลเดอร์ที่ต้องการจะจัดเก็บ

2 . ใช้คำสั่งสร้างและทดสอบแอพพลิเคชัน [create-react-app ตามด้วยชื่อโปรเจกต์] และกด Enter

ในระหว่างนี้เจ้า create-react-app ทำการสร้างโปรเจกต์ให้เรา จัดเตรียมทุกอย่างให้ เรามีหน้าที่รออย่างเดียว

สำเร็จ Success เขาจะบอกว่า Happy hacking “ แฮ็คมีความสุข ” และมีคำสั่งให้เราใช้งาน สิ่งแรกที่เราจะต้องทำคือ npm start เพื่อรันโปรเจกต์ของเรา

Success

3 . เข้าไปในโปรเจกต์ของเรา ด้วยคำสั่ง [cd my-react]

เข้าไปในโปรเจกต์

4 . สั่งรันโปรเจกต์ของเราด้วยคำสั่ง [npm start]

รอให้เขารันเสร็จ เขาจะเปิด หน้าเบราว์เซอร์มาให้เรา

เราจะได้หน้าเพจแอพพลิเคชันของเรา ที่เว็บเบราว์เซอร์ ด้วยเครื่องมือที่เราได้ติดตั้งลงไป

6 . เราต้องการหยุดการทำงาน โดยใช้คำสั่ง [control + C]

7 . เราต้องการจะแก้ไขโปรเจกต์ของเราละ โดยเราจะใชดคำสั่ง [code .] . หรือจะเปิดโปรแกรมเขียนโค้ดมาก่อน แล้วค่อยไปเปิดโปรเจกต์ของตัวเองก็ได้

จะปรากฏ หน้าโปรแกรมมาให้เรา และโปรเจกต์ของเรา เมื่อเข้าไปในโฟลเดอร์ src จะพบกับไฟล์ต่างๆ ลองสำรวจดู

ครั้งหน้าเราจะมาแก้ไข แอพพลิชันของเรากัน บ๊ายยยย