เราจะสร้างโปรเจกต์ React และตกแต่งด้วย CSS and Bootatrp ให้น่ามองยิ่งขึ้น
การตกแต่งเพจด้วย CSS
การตกแต่ง Component นี่สามารถกำหนด CSS ลงใน เอลิเมนต์ต่างๆ และการใช้ CSS สามารถกำหนดได้ 2 แบบ คือ Inline Style คือกำหนดในแต่ละ เอลิมเนต์ และ Link Style คือ กำหนดโดยลิงค์ไปยังไฟล์ CSS
การกำหนด CSS แบบ Inline Style มี 2 แบบ
รูปแบบการเขียนแบบที่ 1
มาเขียนกัน ให้เราไปที่ไฟล์ App.js ดูตรงส่วนของ Tag h1 เขียนเสร็จแล้ว อย่าลืมรันด้วยเน้อ ให้ไปที่ Terminal คำสั่งว่า npm start จะแสดงที่เบราว์เซอร์ของเรา
ผลลัพธ์ จะได้ดังนี้ ตามที่เรากำหนด color เขียว และ textAlign ให้อยู่ตรงกลาง
รูปแบบการเขียนแบบที่ 2 (ตัวแปร)
เหมือนเดิมเรายังอยู่ที่ไฟล์ App.js เหมือนเดิม เราจะสร้างตัวแปรมาหนึ่งตัว ชื่อว่า cssStyle เก็บค่าไว้ และนำเอาตัวแปรนั้นไปใช้ที่แท็ก ที่ต้องการตกแต่ง
ผลลัพธ์ยังคงเหมือนเดิม วิธีนี้จะง่ายต่อการหยิบไปใช้ แท็กไหนอยากจะตกแต่ง สามารถหยิบเอาตัวแปรนี้ไปใช้ได้เลย
การกำหนด CSS แบบ Link Style
คือเราจะกำหนด CSS จากข้างนอก โดยเราจะลิงค์กับไฟล์ที่มีนามสกุล .css วิธีนี้ไฟล์อื่น สามารถหยิบไปใช้ได้ เหมือนเป็นศูนย์กลาง [center] มาลองดูกัน
ให้เราไปไฟล์ App.js ก่อนเลย กำหนดชื่อคลาส cssStyle [className=”cssStyle”] ที่แท็กที่เราต้องการตกแต่ง อิมพอร์ตไฟล์ .css เข้ามาด้วยนะคะ
แล้ว !!! ไปที่ไฟล์ App.css กำหนดชื่อคลาส และเก็บค่า สีของตัวอักษร สีเขียว ข้อความอยู่ตรงกลาง พื้นหลังเป็นสีครีม
มาดูผลลัพธ์กัน ตรงที่กำหนดไว้เลย
การตกแต่งเพจด้วย Bootstrap
Bootstrap เป็น Framework ตัวหนึ่งที่นิยมใช้ เพื่อตกแต่งหน้าตาของเว็บเพจ ความสามารถของเขาก็เช่น สีของข้อความ ตกแต่งตาราง ฟอร์ม การใช้งานเจ้า Bootstrap เพียงแค่เราติดตั้งเขาลงไปในโปรเจกต์ของเรา เราก็จะสามารถใช้ได้แล้ว
การติดตั้ง Bootstrap
1. ไปที่ Terminal (ต้องอยู่ที่โปรเจกต์ของตัวเองน่ะ)
2. คำสั่งเพื่อ Install [npm install bootstrap] และ Enter ไป แล้วรอ….
มาใช้ Bootstrap กัน ให้ไปที่ไฟล์ App.js อันดับแรกอิมพอร์ต Bootstrap เข้ามา และ กำหนดคลาสในการใช้แต่ละค่า เช่น สีตัวอักษร อยู่ในคอนเทนเนอร์
ผลลัพธ์ ตามที่เรากำหนด ไม่มี error คือตอนแรกเราใช้ class ในการกำหนดแล้วมัน error เลยเปลี่ยนไปกำหนดโดยใช้ className ปรากฏว่ารอดจ้า ไม่ติดอะไร
อะเคร !!! เอาไว้เท่านี้ ครั้งหน้าเราจะมาทำในเรื่องของ State ใน React คือข้อมูลที่เก็บอยู่ใน Component บ๊ายยยยย
