เขียนโปรแกรม ด้วย React เบื้องต้น
การจะสร้างหน้าตาของเว็บขึ้นมาได้นั้นมาจากสิ่งที่เรียกว่า Component ให้นึกภาพว่า Component เป็น block ส่วนย่อยของเว็บเราที่จะสร้างออกมา โดยเราจะเขียนโค้ดภาษา JavaScript เพื่ออธิบายหน้าตา (อาจรวมถึงพฤติกรรม) ของ block นั้นๆ มา แทนที่เราจะเขียนใน HTML แทน
ติดตั้งโปรแกรม Visual Studio Code และ node.js และเราจะเริ่มต้นเขียน React ด้วยการสร้างโปรเจค React ด้วยการเปิด Terminal ของ Visual Studio Code ขึ้นมา ตั้งชื่อ App ให้มันว่า test-app โดยใช้คำสั่ง
npx create-react-app test-app
เข้าไปใน โปรเจค ของเรา ด้วยคำสั่ง
cd test-app
ทดสอบการทำงานของ React ด้วยคำสั่ง
npm start
ที่เว็บบราวเซอร์ จะแสดง URL เป็น http://localhost:3000/ และมีหน้าเว็บตามรูปด้านล่าง แสดงว่า React พร้อมใช้งานแล้ว
สามารถ หยุดการทำงานของ React ด้วยการกดปุ่ม Ctrl กับ c พร้อมกัน จากนั้นตอบ y
ติดตั้ง ES7 React
ติดตั้ง ES7 React/Redux/GraphQL/React-Native snippets สำหรับการสร้างแท็ก HTML แบบรวดเร็ว
1-คลิกที่เมนู Eextensions 2-คีย์ react 3- เลือก ES7 4-คลิก Install
แสดงการติดตั้งสำเร็จ
ไปที่เมนู Explorer แล้วไปที่ไฟล์ index.js ลบโค้ดทั้งหมดออกแล้วเขียนโค้ดดังนี้
console.log("I am running")
และทดสอบการทำงาน แล้วไปที่่เว็บเบราว์เซอร์ของเราตอนนี้จะเห็นว่าเป็นหน้าจอว่างและว่างเปล่า เพราะเราไม่ได้เขียน HTML ใดๆ เรามีแท็กเนื้อหาที่มี div ว่างอยู่ในนั้น แต่ถ้าเปิด Inspect เครื่องมือสำหรับนักพัฒนาแล้วเปิดดูคอนโซล คุณจะเห็นว่า JavaScript กำลังทำงานอยู่
และ นั่นคือเหตุผลที่เราต้องใช้แอปพลิเคชัน React ของเราแล้ว
โปรแกรมแรก Hello word!
โดยจะเป็นการเขียนแบบ class component ซึ่งการเขียนแบบนี้เราจะเขียน HTML ลงใน function render แล้วก็ return ตัว HTML ออกไป
เริ่มต้นโดยการ นำเข้า React และ Component
import React, { Component } from 'react';
เราจะสร้างคลาส JavaScript และเราจะเรียกมันว่า App โดยเป็นส่วนขยายของ Component ที่เรานำเข้ามา
class App extends Component {
}
จากนั้นเขียนโค้ดในวงเล็บปีกกา โดยทุกองค์ประกอบตอบสนองต้องมีหนึ่งฟังก์ชันที่เรียกว่าการเรนเดอร์ มิฉะนั้นมันจะไม่ทำงาน จะสร้างฟังก์ชันที่เรียกว่า render และการเรนเดอร์ เพียงแค่ส่งคืนเนื้อหาบางส่วน
class App extends Component {
render()
}
โดยจะ return ส่งคืนสิ่งที่ดูเหมือน HTML และเกือบจะเป็น HTML แต่เป็นอย่างอื่น (คือตอนนี้ขอแค่แสดงข้อความและดูว่ามันทำงานอย่างไร) โดยจะพิมพ์ div และบรรทัดถัดไป จะใส่แท็ก H1 แล้วเราจะให้แสดงข้อความ Hello, world! แล้วลงท้ายด้วยเครื่องหมาย ; ในทางเทคนิคคุณไม่จำเป็นต้องทำ แม้จะไม่จำเป็นก็ตาม แต่ขอแนะนำให้ใส่ ครื่องหมาย ; เพื่อที่จะไม่พบปัญหาในอนาคต
import React, { Component } from 'react';
class App extends Component {
render() {
return <div>
<h1>Hello, world!</h1>
</div>;
}
}ดูเหมือนว่าจะถูกต้อง ที่เรามีฟังก์ชั่นการเรนเดอร์นี้ นี่คือส่วนประกอบแอพนี้ที่มีการแสดงผล ฟังก์ชันที่ส่งคืนบางสิ่งที่ที่เหมือน HTML แต่ไม่มีจุดใดที่มันเขียนสิ่งนี้ลงในหน้าต่างเบราว์เซอร์จริง ๆ แม้ว่าจะแสดงผลก็ตาม
เรามีเนื้อหาบางอย่างที่เราสามารถใส่ลงในเบราว์เซอร์ได้ เราต้องบอกให้แสดงปฏิกิริยาอย่างชัดเจน เพื่อให้ใส่สิ่งนี้ในหน้าต่างเบราว์เซอร์ และเพื่อทำสิ่งนั้น เราต้องนำเข้าสิ่งอื่น โดยเราต้องนำเข้า ReactDom (Dom ย่อมาจาก document object model)
import ReactDom from 'react-dom';และ ReactDOM.render() เป็นฟังก์ชันที่ตัว React จะทำการ render HTML ที่เขียนมา โดยมีจุดที่จะ render อยู่ที่ DOM ที่มี id เป็น root
ReactDom.render(<App/>, document.getElementById('root'));
ความสัมพันธ์ ระหว่าง ไฟล์ index.html กับไฟล์ index.js คือ ไฟล์ index.js ที่เราสร้าง App ให้แสดงข้อความ Hello word จะถูกเรียกใช้ ที่ id=”root” ของไฟล์ index.html (เพราะไฟล์ HTML ที่จะทำงานไฟล์แรกบนเว็บไซต์ คือไฟล์ index.html)
และ นี่คือ โค้ดทั้งหมด
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>
<h1>Hello, world!</h1>
</div>;
}
}
ReactDom.render(<App/>, document.getElementById('root'));
และเมื่อกลับไปที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็น Hello World แสดงอยู่ที่นั่น
การใช้ Fragments
กฏของการ return HTML กลับไปใน class component หรือ function component ก็ตามจะต้อง return กลับไปแค่ 1 element เท่านั้นซึ่งในบางครั้งเราจำเป็นต้องมีหลาย element วิธีแก้ทางแรกก็คือหา tag อะไรก็ได้มาครอบ tag ทั้งหมดไว้โดยส่วนใหญ่ก็จะใช้ div กันถ้าหากเรามีหลาย component เราก็จะมี div ที่ไม่ใช้หลาย tag เกิดขึ้นแต่ถ้าหากใช้ Fragment เราก็จะไม่ต้องใช้ tag อื่นๆพร่ําเพรื่อ
เราจะสร้างไฟล์ใหม่ภายในโฟลเดอร์ src และจะเรียกมันว่า ส่วนท้ายของแอป ชื่อ AppFooter.js
import React, { Component, Fragment } from 'react';
export default class AppFooter extends Component {
render() {
const currentYear = new Date().getFullYear();
return (
<Fragment>
<hr />
<p>Copyright © { currentYear } LungMaker.com</p>
</Fragment>
);
}
}
//คำสั่ง Date().getFullYear(); คือค่าปีปัจจุบัน
ที่ไฟล์ index.js แก้ไขโค้ดเพิ่ม AppFooter เข้าไปดังนี้
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import AppFooter from './AppFooter';
class App extends Component {
render() {
return (
<div>
<div>
<h1>Hello, world!</h1>
</div>
<AppFooter />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็น Footer ส่วนท้ายของแอป เพิ่มเข้ามา
Component ที่มี style
styled-components เป็น library ที่ช่วยให้เราสร้าง component จาก html element ต่างๆ เช่น div, span, a, p หรืออื่นๆ และใส่ style ให้กับเรา และเราเอาผลลัพธ์ที่ได้ไปใช้เสมือนเป็น React component
ไปที่ไฟล์ index.css เขียนโค้ดใหม่ดังนี้
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;1,100;1,300&display=swap');
.app {
max-width: 80%;
margin: 0 auto;
font-family: 'Roboto';
}
ที่ไฟล์ index.js แก้ไขโค้ดเพิ่ม className=”app” เข้าไปดังนี้
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import AppFooter from './AppFooter';
import './index.css';
class App extends Component {
render() {
return (
<div className="app">
<div>
<h1>Hello, world!</h1>
</div>
<AppFooter />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็นมีการจัดรูปแบบเว็บไซต์ที่มี style เพิ่มเข้ามา
สร้างไฟล์ใหม่ภายในโฟลเดอร์ src ชื่อ AppFooter.css (CSS คือ ไฟล์ที่ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ) เขียนโค้ดดังนี้
.footer {
text-align: center;
color: darkgray;
font-size: 0.8em;
}
ไปที่ไฟล์ AppFooter.js แก้ไขไฟล์ เพิ่มการเรียกใช้ AppFooter.css ดังนี้
import React, { Component, Fragment } from 'react';
import './AppFooter.css';
export default class AppFooter extends Component {
render() {
const currentYear = new Date().getFullYear();
return (
<Fragment>
<hr />
<p className="footer">Copyright © { currentYear } LungMaker.com</p>
</Fragment>
);
}
}
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็นส่วน Footer ส่วนท้ายของแอป ที่มีการจัดรูปแบบมี style เพิ่มเข้ามา
CSS Framework
สร้างไฟล์ใหม่ภายในโฟลเดอร์ src ชื่อ AppContent.js เขียนโค้ดดังนี้
import React, { Component } from 'react';
export default class AppContent extends Component {
render(){
return (
<p>This is the content.</p>
);
}
}
ที่ไฟล์ index.js แก้ไขโค้ดเพิ่ม AppContent เข้าไปดังนี้
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import AppFooter from './AppFooter';
import AppContent from './AppContent';
import './index.css';
class App extends Component {
render() {
return (
<div className="app">
<div>
<h1>Hello, world!</h1>
<AppContent />
</div>
<AppFooter />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็นส่วน Content เพิ่มเข้ามา
Bootstrap
Bootstrap คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดกรอบหรือ รูปแบบการพัฒนาเว็บไซต์ในส่วนของการปฏิสัมพันธ์กับผู้ใช้งานเว็บไซต์ ( User Interface )
ที่ Terminal ใช้คำสั่งด้านล่างเพื่อติดตั้ง Bootstrap
npm install bootstrap
ที่ไฟล์ index.js แก้ไขโค้ดเพิ่ม bootstrap เข้าไปดังนี้
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import AppFooter from './AppFooter';
import AppContent from './AppContent';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
class App extends Component {
render() {
return (
<div className="app">
<div>
<h1>Hello, world!</h1>
<AppContent />
</div>
<AppFooter />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
ที่ไฟล์ AppContent.js แก้ไขไฟล์ เพิ่มปุ่ม ฺButton ดังนี้
import React, { Component } from 'react';
export default class AppContent extends Component {
render(){
return (
<p>
This is the content.
<br />
<button class="btn btn-primary" href="#">My Button</button>
</p>
);
}
}
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็น Button เพิ่มเข้ามา
Props
Props หรือชื่อเต็มๆคือ Properties หากเปรียบกับ HTML แล้ว Props จะเป็นคล้ายๆ attributes ของ HTML ดัง เช่น src, href หรือ class โดยเราสามารถส่งข้อมูลจาก Component หนึ่งไปอีก Component ได้ด้วยการใช้ Props
ที่ไฟล์ AppContent.js แก้ไขไฟล์ เอาปุ่ม ฺButton ออก ดังนี้
import React, { Component } from 'react';
export default class AppContent extends Component {
render(){
return (
<p>
This is the content.
<br />
</p>
);
}
}
ที่ไฟล์ index.js แก้ไขโค้ดเพิ่ม AppHeader เข้าไปดังนี้
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import AppHeader from './AppHeader';
import AppFooter from './AppFooter';
import AppContent from './AppContent';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
class App extends Component {
render() {
return (
<div className="app">
<AppHeader title="Cool App!" />
<AppContent />
<AppFooter />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
สร้างไฟล์ใหม่ภายในโฟลเดอร์ src ชื่อ AppHeader.js เขียนโค้ดดังนี้ (props คือ ค่าของ Component อื่นที่เราเอามาใช้ )
import React, { Component } from 'react';
export default class AppHeader extends Component {
render() {
return (
<h1>{ this.props.title}</h1>
);
}
}
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็นไฟล์ส่วนหัว AppHeader.js และ ข้อความ Cool App! คือ title ซึ่งเป็น props ของ AppHeader จากไฟล์ index.js เพิ่มเข้ามา
ที่ไฟล์ index.js แก้ไขโค้ดเพิ่ม myProps เข้าไปดังนี้
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import AppHeader from './AppHeader';
import AppFooter from './AppFooter';
import AppContent from './AppContent';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
class App extends Component {
render() {
const myProps = {
title: "My Cool App!",
subject: "My subject",
favourite_color: "red",
}
return (
<div className="app">
<AppHeader {...myProps} />
<AppContent />
<AppFooter />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
จะเห็นได้ว่า ที่ไฟล์ index.js เรามีการเรียกใช้ AppHeader {…myProps} คือ props ชื่อว่า myProps และใน AppHeader.js นั้นเรียกใช้ {this.props.title} ซึ่งหมายความว่าให้เอา ข้อความใน myProps ชื่อว่า title นั่นคือคำว่า My Cool App! ผลที่ได้จึงเป็นดังนี้
React Events
ที่ไฟล์ AppContent.js แก้ไขโค้ดเพิ่ม button และ Event เข้าไปดังนี้
import React, { Component } from 'react';
export default class AppContent extends Component {
fetchList = () => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then(json => {
console.log(json);
let posts = document.getElementById("post-list");
json.forEach(function(obj){
let li = document.createElement("li");
li.appendChild(document.createTextNode(obj.title));
posts.appendChild(li);
})
})
}
render(){
return (
<p>
This is the content.
<br />
<button onClick={this.fetchList} className="btn btn-primary">Fetch Data</button>
<hr />
<ul id="post-list"></ul>
</p>
);
}
}
ที่เว็บเบราว์เซอร์ ตอนนี้เราจะเห็น มีปุ่ม Fetch Data เพิ่มเข้ามา
และเมื่อมีเหตุการณ์ คลิกที่ปุ่ม Fetch Data จะมีข้อมูลแสดงออกมา
credit : https://www.udemy.com/course/working-with-react-and-go-golang/
