เรียนรู้ React ผ่านเมนู Log in อย่างง่าย

Open-source Platforms สำหรับพัฒนา User Interfaces มีมากมาย ทำไมเพื่อน ๆ ถึงแนะนำให้ใช้ React ใน Project ของเรา? React คืออะไร? มีดีอย่างไร? ถ้าจะใช้ต้องมีพื้นฐานด้านใดก่อนบ้าง?

สวัสดีค่ะ ดิฉัน นางสาว ปวริศา คันธรส ยินดีที่จะไขข้อสงสัยข้างต้น พร้อมเปิดโอกาสให้ผู้อ่านทุกท่านเรียนรู้ และทำความเข้าใจ Open-source JavaScript Library ที่มีชื่อว่า React ผ่านตัวอย่าง ‘ เมนู Log in อย่างง่าย ’ ในส่วนท้ายสุดของบทความ โดยหวังเป็นอย่างยิ่งว่า ประสบการณ์จากการฝึกงาน ณ บริษัท E-Commerce แห่งหนึ่งในประเทศไทยเป็นระยะเวลา 6 เดือน ประกอบกับองค์ความรู้ที่ตั้งใจศึกษาเพิ่มเติมทั้งหมด กลั่นกรองออกมาเป็นบทความที่ดิฉันกำลังจะนำเสนอต่อไปนี้ จะมีส่วนสร้างเสริมความรู้ด้านเทคโนโลยีของผู้อ่านทุกท่านไม่มากก็น้อยนะคะ

บทความนี้จะกล่าวถึง 4 ประเด็นสำคัญ อันได้แก่ …

• React คืออะไร?
• เหตุผลที่ React เป็นที่นิยม และถูกแนะนำให้ใช้ในการพัฒนาส่วนติดต่อผู้ใช้ (Front-end)
• ความรู้พื้นฐานก่อนการเริ่มใช้ React
• เรียนรู้ React ผ่านเมนู Log in อย่างง่าย

ถ้าพร้อมแล้ว เรามาเริ่มกันเถอะ!

React คืออะไร?

• React คือ Open-source JavaScript Library ที่ถูกใช้เพื่อสร้างส่วนต่อประสานกับผู้ใช้ (User Interface) โดยเฉพาะ สำหรับ Single Page Applications
• React ถูกสร้างขึ้นครั้งแรกโดย Jordan Walke วิศวกรซอฟต์แวร์ที่ทำงานให้กับ Facebook
• React ถูก Deploy บน News Feed ของ Facebook ในปีคริสต์ศักราช 2011 และบน Instagram.com ในปีคริสต์ศักราช 2012

(แหล่งที่มา: https://wccftech.com/share-of-instagrams-stories-in-facebooks-overall-revenue-is-increasing-according-to-socialbakers/)

• React อนุญาตให้ผู้พัฒนาสร้าง Web Applications ขนาดใหญ่ที่สามารถเปลี่ยนข้อมูล (Data) โดยที่ไม่มีการโหลดหน้าเว็บไซต์ซ้ำ
• จุดประสงค์หลักของ React คือ ความเร็วความเรียบง่าย และสามารถพัฒนาระบบได้อย่างอิสระ
• React สามารถใช้ร่วมกับ JavaScript Libraries หรือ Frameworks อื่น ๆ เช่น Lodash, Axios, และ Formik เป็นต้น

หมายเหตุ : เราสามารถเรียก React ได้อีก 2 ชื่อ คือ ReactJS และ React.js

เหตุผลที่ React เป็นที่นิยม และถูกแนะนำให้ใช้ในการพัฒนาส่วนติดต่อผู้ใช้ (Front-end)

มีทั้งหมด 6 เหตุผลด้วยกัน สามารถจำแนกเป็นหัวข้อ และอธิบายได้ดังนี้ …

1. ความเรียบง่าย (Simplicity)

ความเรียบง่ายดังกล่าว เกิดจาก …

• วิธีการพัฒนาบนพื้นฐานของ Component (Component-based Approach)
• Lifecycle ที่ถูกออกแบบมาเพื่อจัดการการไหลของข้อมูล ตั้งแต่เปิดหน้าเว็บไซต์จนกระทั่งออกจากหน้าเว็บนั้น อ่านเพิ่มเติม
• ทุกเว็บบราวเซอร์ Support JavaScript ทำให้ง่ายต่อการพัฒนาระบบด้วย React

ซึ่งทำให้ React ง่ายต่อการเรียนรู้ รวมถึงง่ายต่อการสร้าง-สนับสนุนเว็บไซต์ และ แอปพลิเคชันมือถือระดับมืออาชีพ

React สามารถใช้ JavaScript XML หรือเรียกสั้น ๆ ว่า ‘ JSX ’ ซึ่งเป็น Syntax พิเศษที่อนุญาตให้เราเขียน HTML ร่วมกับ JavaScript

2. ง่ายต่อการเรียนรู้ (Easy to Learn)

แน่นอนว่า ระดับความยาก-ง่ายในการเรียนรู้ ล้วนขึ้นอยู่กับพื้นฐานด้าน Programming ของแต่ละบุคคล แต่สำหรับการนำ React เข้ามาใช้ในงานใด ๆ เบื้องต้นแล้ว เพียงมีความรู้พื้นฐานเกี่ยวกับ JavaScript, HTML, และ CSS การศึกษาการทำงานของ React ก็ไม่ยากเกินความสามารถของทุกท่านอย่างแน่นอน

3. วิธีการแบบ Native (Native Approach)

React สามารถถูกใช้เพื่อสร้างแอปพลิเคชันมือถือ ด้วย React Native ซึ่งเป็นหนึ่งใน Feature ของ React

React มีความสามารถในการนำกลับมาใช้ใหม่ (Reusability) หมายความว่า …

“ React รองรับการนำ Code ขนาดใหญ่/มีลักษณะกว้างขวางกลับมาใช้ใหม่ ทำให้เราสามารถพัฒนาแอปพลิชันบนระบบปฏิบัติการ IOS, Android, และ Web ในเวลาเดียวกัน ”

ข้อแตกต่างระหว่าง ReactJS และ React Native อ่านเพิ่มเติม

4. การผูกข้อมูล (Data Binding)

React ใช้การผูกข้อมูลทางเดียว (One-way Data Binding) และโครงสร้างแอปพลิเคชันที่เรียกว่า ‘ Flux ’ ทำให้แอป ReactJS ขนาดใหญ่ สามารถเข้าถึงข้อมูลได้ง่าย และรวดเร็ว (ไม่จำเป็นต้องไหลข้อมูลจาก Component บนสุดของ Component นั้นเสมอไป)

5. ประสิทธิภาพ (Performance)

React เป็น Library ไม่ใช่ Framework

ขนาดของ React จึงเล็กมาก ทำให้เครื่องคอมพิวเตอร์ที่ทรัพยากรน้อยสามารถใช้ React ได้

6. ความสามารถในการทดสอบ (Test-ability)

หากแต่ละ Components มีส่วนที่ถูกแบ่งย่อยไว้ เช่น Functions หรือ Child Components ส่วนย่อยเหล่านี้จะส่งผลให้การทดสอบระบบเป็นไปโดยง่าย

ขยายความได้ว่า เมื่อโปรแกรมมีองค์ประกอบแยกย่อย ซึ่งเอื้อต่อการเขียน Test (Unit Test) - ในอนาคต หากมีการแก้ Flow การไหลของ state การแก้ไขดังกล่าวจะไม่ส่งผลกระทบต่อ Features ที่เกี่ยวข้องกับ state นั้น

ความรู้พื้นฐานก่อนการเริ่มใช้ React

ความรู้พื้นฐานที่ควรมีก่อนการเริ่มใช้ React มีทั้งหมด 9 หัวข้อ ดังนี้ …

• ภาษา JavaScript
• JavaScript XML (JSX)
• Hyper Text Markup Language (HTML)
• Cascading Style Sheets (CSS)
• Document Object Model (DOM)
• ES6
• Babel
• Node.js
• npm

หากท่านใดมีความรู้-ความเข้าใจในหัวข้อข้างต้นอยู่แล้ว ท่านสามารถข้ามลงไปศึกษาตัวอย่าง ‘ เมนู Log in อย่างง่าย ’ ที่อยู่ด้านล่างได้เลยนะคะ :]

ภาษา JavaScript

React คือ Open-source JavaScript Library จึงไม่แปลกที่ผู้ที่ต้องการใช้ React ควรมีความรู้พื้นฐาน รวมถึงเคยเขียนภาษา JavaScript มาบ้างไม่มากก็น้อย

JavaScript Tutorial อ่านเพิ่มเติม

JavaScript XML (JSX)

JSX คือ XML Syntax Extension ซึ่งถูกรวมเข้ากับ JavaScript

แท็ก (Tags) ใน JSX สามารถมี Names, Attributes, Children เหมือนกับ HTML

ตัวอย่าง JSX Code

แต่อย่างที่เห็น JSX ไม่ใช่ HTML และไม่ใช่ JavaScript เช่นกัน

หมายเหตุ: JSX ไม่ใช่ส่วนหนึ่งของ React แต่ JSX ถูกแนะนำให้ใช้ร่วมกับ React เพื่อความสะดวกในการอธิบายส่วนต่อประสานกับผู้ใช้ว่าควรมีรูปแบบเป็นเช่นไร (ผู้พัฒนายังคงสามารถใช้ JavaScript ต่อไป เพียงแค่หากเขียนด้วย JSX ระบบจะออกมาสมบูรณ์ยิ่งขึ้น)

Hyper Text Markup Language (HTML)

เชื่อว่าหลายท่านรู้จัก และได้ยินชื่อเสียงของภาษานี้มาหนาหูพอสมควรแล้ว เพราะ HTML คือ Standard Markup Language สำหรับหน้าเว็บ ที่นักพัฒนาระบบควรมีประสบการณ์การใช้งานติดตัว

องค์ประกอบ HTML คือ Building Blocks ของหน้า HTML ซึ่งจะถูกแสดงด้วย <> (Tags)

โครงสร้างเอกสาร HTML (แหล่งที่มา: https://www.w3schools.com/whatis/whatis_html.asp)

Cascading Style Sheets (CSS)

รองลงมาจาก HTML คือ CSS ที่จะช่วยอธิบายว่า องค์ประกอบ HTML จะถูกแสดงผล(เป็น)อย่างไร

CSS ช่วยตกแต่งหน้าเว็บของเราให้สวยงามขึ้นนั่นเอง ;]

CSS Syntax: หลักการของ CSS นั้นประกอบด้วย Selector และ Declaration ที่มี Property กับ Value เป็นส่วนสำคัญ ดังรูป

(แหล่งที่มา: https://www.w3schools.com/whatis/whatis_css.asp)

Document Object Model (DOM)

DOM คือ Programming API สำหรับเอกสาร HTML และ XML โดยเมื่อหน้าเว็บถูกโหลด บราวเซอร์จะสร้าง DOM ของหน้านั้น

ด้วย DOM ผู้พัฒนาสามารถ …

• สร้างเอกสาร
• สำรวจเส้นทางไปตามโครงสร้างเอกสาร
• เพิ่ม/เปลี่ยนแปลง/ลบ องค์ประกอบ และ Content

ตัวอย่างการเรียกใช้ ReactDOM ในไฟล์ index.js เพื่อการแสดงผลแก่ผู้ใช้

ES6

ES6 (หรือ ECMAScript 2015) คือ ECMAScript เวอร์ชันที่ 6 โดย ES6 นี้ มีส่วนช่วยให้ JavaScript ที่ผู้พัฒนาเขียน มีความสั้น-กระชับ และเป็นระเบียบยิ่งขึ้น

Features ใหม่ใน ES6 ที่ผู้พัฒนาควรทำความคุ้นเคยมี 3 Features ด้วยกัน ได้แก่ …

• Class: แทนที่จะใช้คีย์เวิร์ด ‘ function ’ เพื่อเริ่ม Code ผู้พัฒนาสามารถใช้คีย์เวิร์ด ‘ class ’ แล้วจึงกำหนด Properties ภายใน constructor()

ตัวอย่างการใช้คีย์เวิร์ด class และ constructor()

• Arrow Function: อนุญาตให้ผู้พัฒนาเขียน Function Syntax ที่สั้นกว่า ภายใต้เงื่อนไขที่จำกัด คือ …
  - Arrow Function ไม่สามารถทำงานร่วมกับ ‘ new ’ (คีย์เวิร์ดสำหรับการสร้าง Object ใหม่)
  - Arrow Function ช่วยให้เราไม่ต้อง ‘ bind ’ ฟังก์ชันในขอบเขตการกำหนดตัวแปรตั้งต้น เช่น ภายใน constructor()

ตัวอย่างการใช้ Arrow Function

• ชนิดของ Variable

var
- Function Scope
- เมื่อถูกใช้นอกฟังก์ชัน ตัวแปรดังกล่าวจะเป็นของ Global Scope
- เมื่อถูกใช้ในฟังก์ชัน ตัวแปรดังกล่าวจะเป็นของฟังก์ชันนั้น
- เมื่อถูกใช้ใน Block (เช่น For Loop) ตัวแปรดังกล่าวจะยังสามารถถูกใช้ภายในฟังก์ชันที่ Block อยู่

let
- Block Scope เวอร์ชันของ ‘ var ’
- เมื่อถูกใช้ใน Block (เช่น For Loop) ตัวแปรดังกล่าวจะสามารถถูกใช้ได้เฉพาะภายใน Block ที่ตัวแปรถูกประกาศเท่านั้น

const
- Block Scope
- เมื่อตัวแปรชนิดนี้ถูกประกาศแล้ว ค่าของตัวแปรดังกล่าวจะไม่สามารถเปลี่ยนแปลงได้อีก

Babel

Babel คือ JavaScript Compiler ที่สามารถแปลภาษา Markup หรือภาษา Programming ไปเป็นภาษา JavaScript

ด้วย Babel ผู้พัฒนาสามารถใช้ Features ใหม่ล่าสุดของ JavaScript เช่น ES6

React ใช้ Babel ในการแปลง JSX เป็น JavaScript

Node.js

Node.js คือ Open Source Server Environment ที่อนุญาตให้ผู้พัฒนา Run JavaScript บนเซิร์ฟเวอร์

npm

npm (node package manager) คือ World’s Largest Software Registry

npm เป็นคลังเก็บ Library ของ JavaScript ที่ใหญ่ที่สุดในโลก และยังเป็นตัวจัดการ-Installer สำหรับ Software Packages ต่าง ๆ

npm มี CLI (Command Line Client) ซึ่งสามารถถูกใช้เพื่อดาวน์โหลด-Install ซอฟต์แวร์

เรียนรู้ React ผ่านเมนู Log in อย่างง่าย

ในหัวข้อนี้ผู้เขียนขออนุญาตข้ามขั้นตอนการสร้าง React Project โดยหากท่านใดต้องการทราบขั้นตอนข้างต้น สามารถอ่านเพิ่มเติมได้ที่นี่ค่ะ React Getting Started

การทำงานของเมนู Log in อย่างง่าย

หน้าเริ่มต้นของเมนู Log in อย่างง่าย (Zoom +150%)

• ช่องกรอก Email address: หากผู้ใช้กรอกข้อมูลเข้าไม่ถูกต้อง สีกรอบของช่องกรอกจะเปลี่ยนเป็นสีแดง และมีข้อความแจ้งเตือนด้านล่างปุ่ม Log in

• ช่องกรอก Password: หากผู้ใช้กรอกข้อมูลเข้าไม่ถูกต้อง สีกรอบของช่องกรอกจะเปลี่ยนเป็นสีแดง และมีข้อความแจ้งเตือนด้านล่างปุ่ม Log in

• ปุ่ม Log in
  - หากค่า Email address และค่า Password ไม่ถูกต้อง: ปุ่ม Log in ถูก Lock
  - หากค่า Email address และค่า Password ถูกต้อง: ปุ่ม Log in เปิดให้ผู้ใช้กด

ปุ่ม Log in เมื่อผู้ใช้กรอก Email address และ Password ถูกต้อง

โครงสร้างของ myfirstreact

myfirstreact คือ โฟลเดอร์ ซึ่งบรรจุ React Project ที่เรากำลังสนใจ ประกอบด้วยไฟล์ต่าง ๆ ดังนี้ …

ทุกท่านเห็นความแตกต่างระหว่างสีส้มกับกับสีเขียวของชื่อโฟลเดอร์/ไฟล์มั้ยคะ?

เนื่องจาก Code Editor ที่ผู้เขียนใช้ และการเชื่อมต่อ Repository กับ GitHub หลังจากการสร้าง React Project ณ ตอนนั้น ทำให้เมื่อมีการแก้ไขหรือสร้างโฟลเดอร์/ไฟล์ใหม่ => Code Editor แสดงความแตกต่างระหว่างไฟล์ดั้งเดิม กับโฟลเดอร์/ไฟล์ที่มีการแก้ไขหรือสร้างขึ้นใหม่

ซึ่งจากการชี้แจงข้างต้น สามารถอธิบายได้ว่า …

• โฟลเดอร์ Components ถูกสร้างขึ้น โดยมีไฟล์ LoginMenu.js อยู่ภายใน
• ไฟล์ FormErrors.js, styles.css, .env ถูกสร้างขึ้นใหม่ด้านนอกสุดภายใน myfirstreact

โดยภายใน React Project อาจประกอบด้วย Components, Containers, และ Services ขึ้นอยู่กับว่า ผู้พัฒนาต้องการให้โครงสร้างของ React Project นั้นถูกจำแนกด้วยองค์ประกอบหลักใดบ้าง

หมายเหตุ
- ไฟล์ App.js และ index.js มีการเปลี่ยนแปลงก่อนถูกเชื่อมต่อ Repository กับ GitHub
- ไฟล์บางไฟล์ใน myfirstreact อาจไม่ถูกเรียกใช้/กล่าวถึงในหัวข้อต่อไป
- ตัวอย่างเมนู Log in นี้ เป็นเพียงตัวอย่างอย่างง่าย ผู้เขียนจึงสร้างโฟลเดอร์ Components เพื่อบรรจุไฟล์ LoginMenu.js ซึ่งเป็น Component หลักเพียงหนึ่งเดียวของ User Interface ที่ทุกท่านเห็น

ไฟล์ที่ทำให้เมนู Log in ทำงาน

ภายในไฟล์เหล่านี้ มีอะไรซ่อนอยู่?

ก่อนอื่นผู้เขียนขอแนะนำให้เปิด 2 หน้าต่างคู่กัน เพื่อความสะดวกในการดู Code ไปพร้อมกับอ่านคำอธิบายนะคะ :)

index.js

• บรรทัดที่ 2: มีการ import ReactDOM from ‘react-dom’
• บรรทัดที่ 4: มีการ import App from ‘./App’
• บรรทัดที่ 8: มีการเรียกใช้ ReactDOM เพื่อการแสดงผล Component ที่มีชื่อว่า App ใน Root Element ซึ่งทั้งหมดเป็นสิ่งแรกที่จะนำไปแสดงผลแก่ผู้ใช้หลังการ Run คำสั่ง npm start ณ โฟล์เดอร์ของ React Project

ตัวอย่างการ Run คำสั่ง npm start ณ โฟล์เดอร์ของ React Project

• หากต้องการนำ Bootstrap มาใช้กับ React Project ทุกท่านต้อง Run

npm install react-bootstrap bootstrap

ผ่าน npm (หรือ yarn) ก่อน
ตามด้วยการเพิ่ม import ‘bootstrap/dist/css/bootstrap.min.css’ ในไฟล์ index.js (บรรทัดที่ 6)

React-bootstrap Getting Started อ่านเพิ่มเติม

App.js

• Component ที่ถูกเรียกใช้ใน index.js
• บรรทัดที่ 1: มีการ import React, { Component } from ‘react’ เพื่อนำ Component มาจำกัดความ class App ในบรรทัดที่ 4
• บรรทัดที่ 2: มีการ import LoginMenu from ‘./Components/LoginMenu’
• บรรทัดที่ 5: ฟังก์ชัน render() มีการคืนค่าการแสดงผลผ่าน HTML โดยการคืนค่า สามารถคืนค่าได้เพียง 1 Element หลักเท่านั้น (จะเป็น Element ประเภทใดก็ได้ ซึ่งในไฟล์นี้ใช้ <div> ในการคืนค่า)
• บรรทัดที่ 8: มีการเรียกใช้ Component ที่มีชื่อว่า LoginMenu
• บรรทัดที่ 14: การ export default (ตามด้วยชื่อ Component ปัจจุบัน) คือ การส่งออกการทำงานของ Component ปัจจุบัน ไปยัง Components ใด ๆ ที่ Import Component นี้ไปประกอบการทำงานของตน - ทำให้ Component เป็นที่รู้จักนั่นเอง

Components
- เหมือนกับฟังก์ชันที่คืนค่า HTML Element
- มีอิสระในตัวเอง และเป็น Bits of Code ที่สามารถนำกลับมาใช้ใหม่ได้
- ตอบสนองความต้องการเหมือนกับฟังก์ชัน JavaScript แต่ทำงานอย่างโดดเดี่ยว และคืนค่า HTML ด้วยฟังก์ชัน render()
- Component มี 2 ประเภท คือ Class Components และ Function Components
อ่านเพิ่มเติม

styles.css

FormErrors.js

• JSX Element ที่ถูกเรียกใช้ในไฟล์ LoginMenu.js (บรรทัดที่ 96)
• ทำหน้าที่คืนค่า <p> ที่ประกอบไปด้วย ชื่อฟิลด์ที่ผู้ใช้กรอกแล้วเกิด Error ตามด้วยข้อความแจ้งรายละเอียดของ Error ดังกล่าว

ตัวอย่างการแสดงผลจากการทำงานของ FormErrors.js (เฉพาะ 2 ข้อความใต้ปุ่ม Log in)

LoginMenu.js

• Component ที่ถูกเรียกใช้ใน App.js
• บรรทัดที่ 6: ฟังก์ชัน constructor() คือ พื้นที่ประกาศ Properties ตั้งต้นของ Component ซึ่งฟังก์ชัน constructor() นี้จะถูกเรียกทุกครั้งที่ Component เริ่มการทำงาน
• บรรทัดที่ 7: super() Statement ที่ทำหน้าที่เรียกใช้งานฟังก์ชัน constructor() ของ Parent Component และทำให้ Component ปัจจุบันสามารถเข้าถึงทุกฟังก์ชันของ Parent Component
• บรรทัดที่ 8: ใน React กล่าวได้ว่า Component Properties ควรถูกเก็บไว้ใน Object ที่เรียกว่า state โดยผู้พัฒนาสามารถกำหนดค่าเริ่มต้นในของ state ได้มากเท่าที่ต้องการ
• บรรทัดที่ 16-19: หากใช้ Arrow Functions ในการ Binding ท่านสามารถลบ Code ส่วนนี้ออกได้เลย
• บรรทัดที่ 54: state สามารถถูกเปลี่ยนแปลงได้ด้วยคำสั่ง
  this.setState({ ชื่อ state ที่ต้องการเปลี่ยน: ค่าที่ต้องการ Assign })
• บรรทัดที่ 62-63: การกำหนดตัวแปรประเภท const ด้วยค่าใน state สำหรับทุกครั้งที่มีการเรียกฟังก์ชัน render()
• บรรทัดที่ 64-65: console.log() สำหรับการตรวจสอบเงื่อนไข การทำงานของฟังก์ชัน การเปลี่ยนแปลงของ state หรือตัวแปรใด ๆ และอื่น ๆ (คลิกขวา > Inspect(ตรวจสอบ) > Console)

console.log เพื่อดูค่าตั้งต้นใน state หลังการเรียก render() โดยที่ยังไม่มีการกระทำจากผู้ใช้

console.log เพื่อดูค่าใน state หลังการเรียก render() โดยที่่มีการกระทำจากผู้ใช้

• บรรทัดที่ 67: Handling Forms ( <form> )คือ การจัดการการเปลี่ยนแปลงของข้อมูลเข้า เมื่อข้อมูลดังกล่าวเปลี่ยนแปลง หรือได้รับการ Submit โดยผู้พัฒนาสามารถรับมือกับเหตุการณ์ด้วย Attribute ชื่อว่า onChange
• บรรทัดที่ 78: เมื่อเกิดการเปลี่ยนแปลงของข้อมูลเข้า ณ ฟิลด์ที่มี onChange อยู่ การเปลี่ยนแปลงข้างต้นจะส่งผลให้ onChange เรียกใช้ Handler ซึ่งถูกกำหนดไว้ โดยในตัวอย่าง Handler นั้นมีชื่อว่า handleUserInput (บรรทัดที่ 22)
• บรรทัดที่ 84: มีการใช้ Conditional Rendering ในการเลือกการแสดงออกของ ค่าภายใน className โดยการแสดงออกดังกล่าวเป็นการนำ React Bootstrap มาประยุกต์ใช้ แทนที่จะเขียน Style ไว้ใน styles.css
• บรรทัดที่ 96: มีการเรียกใช้ FormErrors พร้อมส่ง JSX Attribute เป็น state ที่ชื่อว่า formErrors ด้วยค่า this.state.formErrors
• บรรทัดที่ 37: มีการตรวจสอบรูปแบบของอีเมลที่ผู้ใช้กรอกด้วย Regular Expressions

และนี้คือทั้งหมดของ เรียนรู้ React ผ่านเมนู Log in อย่างง่าย

ผู้เขียนหวังเป็นอย่างยิ่งว่า ผู้อ่านทุกท่านจะได้รับความรู้ และเกิดแรงขับเคลื่อนในการนำเครื่องมือชิ้นนี้ไปใช้กับ Project ของตัวเองในภายภาคหน้านะคะ :)

แหล่งที่มา

• https://reactjs.org/
• https://reactjs.org/docs/introducing-jsx.html
• https://reactjs.org/docs/conditional-rendering.html
• https://www.c-sharpcorner.com/article/what-and-why-reactjs/
• https://www.w3schools.com/whatis/whatis_react.asp
• https://www.w3schools.com/whatis/whatis_html.asp
• https://www.w3schools.com/whatis/whatis_css.asp
• https://www.w3schools.com/whatis/whatis_npm.asp
• https://www.w3schools.com/REACT/react_es6.asp
• https://www.w3schools.com/react/react_components.asp
• https://www.w3schools.com/nodejs/default.asp
• https://www.w3.org/TR/WD-DOM/introduction.html

ข้อมูลเพิ่มเติมที่น่าสนใจ

When (and why) you should use ES6 arrow functions - and when you shouldn't

Functional vs Class-Components in React

มาเรียนรู้เรื่อง Callback และ Promise ใน Asynchronous JavaScript กันหน่อย

Regular Expression เช็ก/จัด/ตัด/แบ่งstring แค่บอกมาว่าอยากได้อะไร