หลังจากที่สร้าง Component เบื้องต้นแล้วที่นี้ก็มาเริ่มใส่ css ให้กับ form ต่างๆหรือ html tag ที่เราต้องการ render ออกมา โดยใน css นั้นจะมีการใช้ attribute class เพื่อกำหนดรูปแบบต่างๆให้กับ html ไม่ว่าจะเป็นเรื่องสี font ขนาด เป็นต้น ซึ่งจะทำให้เจ้า JSX ที่เก็บข้อมูล html นั้นเกิดปัญหาได้เพราะคำว่า class ดันไปต้นกับคำสงวนใน javascript นั้นเอง เพราะฉะนั้นจะต้องหาคำมาแทน จึงใช้คำว่า className แทนคำว่า class และ คำว่า for ให้เปลี่ยนไปใช้คำว่า htmlFor แทน ซึ่งใน React ปัจจุบันนับตั้งแต่ React 16 ขึ้นไปในสามารถใช้คำว่า class ตรงได้เลย แต่ก็จะมีบ้างกรณีที่ไม่สามารถใช้ได้ เพราะฉะนั้น ณ เวลานี้ควรใช้ className ไปก่อนเพื่อความเป็นมาตรฐานและไม่เกิดปัญหาที่ไม่คาดคิดเกิดขึ้นได้

เริ่มแรกผมจะใช้ css จาก bootstrap ซึ่งเป็น css พื้นฐานที่เป็นที่นิยมในปัจจุบันโดยจะใช้เป็น CDN เหมือนเดิมครับ สามารถกดเข้าไปที่ เว็บ bootstrap เพื่อ copy code ในส่วนของ CDN ได้เลยจากลิงค์นี้ครับ bootstrap

ให้ทำการสร้างไฟล์ html ขึ้นมาจากนั้น การ copy ส่วน css ใส่ในระหว่างเปิดปิด tag <head></head> ส่วนที่เป็น javascript ให้ใส่ก่อนปิด tag </body> ครับ

จากนั้นให้ทำการสร้าง div มี id ชื่อว่า loginForm แล้วในส่วนของ react ก็ใส่ใน tag script type babel เหมือนเดิม โดยทำการประกาศตัวแปรที่มีชื่อว่า LoginformHTML เก็บข้อมูล html ที่เป็น form login อย่างง่ายที่มีการใช้ css ของ bootstrap แต่ในส่วนของคำว่า class นั้นให้เปลี่ยนเป็น className ให้หมด จากนั้นก็ใช้คำสั่ง React.DOM.render ทำการ render ค่าในตัวแปร LoginformHTML ไปยัง <div> tag id loginForm ทำการบันทึกแล้วเปิดดูครับ

<!DOCTYPE html>
<html>
<head>
	<title>Hello World</title>
	<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
	<div id="loginForm"></div>
	<script type="text/babel">
	var LoginformHTML = 
	<div className="container-fluid">
		<div className="row">
			<div className="col-lg-6">
				<form>
					<h1>Login Form</h1>
					<hr/>
					<div className="form-group">
						<label htmlFor="emailInput">Email address</label>
						<input type="email" className="form-control" id=
						"emailInput" placeholder="Email"/>
					</div>
					<div className="form-group">
						<label htmlFor="passwordInput">Password</label>
						<input type="password" className="form-control"
						id="passwordInput" placeholder="Password"/>
					</div>
					<button type="submit" className="btn btn-primary col-xs-offset-9 col-xs-3">Submit</button>
				</form>
			</div>
		</div>
	</div>	
	ReactDOM.render(LoginformHTML,document.getElementById('loginForm'));
	</script>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
</body>
</html>
ผลลัพธ์เมื่อลองเปิดไฟล์เว็บเพจ

จะเห็นว่าเราสามารถใช้ css ได้ตามปกติเพียงแต่ต้องเปลี่ยนคำว่า class เป็น className เพื่อที่จะไม่มีปัญหาตอนแปลงโค้ดเป็น javascript นั้นคำไปตรงกันกับคำว่า class ของ javascript และจุดสำคัญอีกอย่างคือ React จะ render แต่ root tag หรือ parent tag อันเดียวเท่านั้นคือ

<div id=”parent”>….content อื่น </div>

แต่ถ้ามีหลาย root tag จะทำให้ error เช่น

<div id=”parentA”>… content A..</div>

<div id=”parentB”>…content B..</div>

นอกจากนี้ยังต้องเปิดปิด tag ให้ครบทุกอันถ้าไม่ครบก็จะ error เหมือนกัน ลองลบ ปิด tag สักอันจากโค้ดตัวอย่าง เมื่อดูในหน้า console ของ browser ( key ลัด F12) ก็จะแสดง error แล้วหน้าเพจก็จะไม่แสดงข้อมูลใดทั้งสิ้น

ก็เป็นอันขอจบบทความในตอนนี้เพียงเท่านี้นะครับ

React คืออะไร

เริ่มต้น Hello World ใน React.js

Component ใน React.js เบื้องต้น

Leave a Reply

Your email address will not be published. Required fields are marked *