เขียน React.js กันเลยดีกว่า [Day 1]

มาถึงช่วงลองของใหม่กันเเล้ว อันที่จริงมันก็ไม่ใหม่หรอกสำหรับการมาของ React.js

เเต่ผมเพิ่งจะลองไงจบนะ โครตท้าทาย ฮ่าๆๆ

ก่อนอื่นผมของเข้าเว็บมันเลยเเล้วหาสพรรพคุณทางโภชนาการของมันก่อนนะครับ

เพราะถือว่าตลาดเเรงงานในไทยเราเขียน React ได้นี่เงินเดือนก็โออยู่…โอเXี้ย

เเต่เราจะเรียนเรื่องนี้ไม่ใช้เพราะเงินเดือนโว้ย เเต่เพื่อปรับพื้นฐานให้ก้าวทันสมัยเเค่นั้นเอง จริงๆท้าคุณได้งานมาให้ทำโปรเจคหนึ่ง ถ้าคุณถนัด Angular คุณทำมันได้ดีกว่า React เเน่นอน ฉะนั้น เราโยนคำว่า Platform ทิ้งไปเลย โยน solutionทิ้งไปเลย เปิดใจเเละเเค่ลองเขียนแค่นั้น อย่ากลัวการเรียน ………….ERROR อีกล่ะ อย่าไปกลัว ผมเป็นประจำ

บทความนี้ผมเขียนถูกเขียนเป็นไปตามที่ผมเข้าใจ หากไม่ถูกต้อง ต้องขออภัยด้วยนะครับ (ด่าได้เเต่อย่าเเรง)

WHY REACT? โปรดอ่านที่นี่อีกที่นะครับ

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

เปิดมาสะดุดกับบรรทัดนี้มากเลย

We built React to solve one problem: building large applications with data that changes over time.

การสร้างโปรแกรมขนาดใหญ่ที่มีการเปลี่ยนแปลงอยู่ตลอดเวลา

มึงแก้ปัญหาตรงนี้หรอ เยดดดดโด้ โครต Big Idea

Build Composable Components

เทพอีกเเบ้ว ทำงานแบบเเยก Component โอ้โห

ผมขอหยิบความน่าตื่นเต้นมาเเค่นี้ก่อนละกันนะครับ เดี๋ยวจะยาวเกินนะครับ

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

ตื่นเต้นโอเค เราเข้ามาที่ https://facebook.github.io/react/docs/getting-started.html เพื่อเริ่ม Getting Started

Create React App

https://github.com/facebookincubator/create-react-app

npm install -g create-react-app

ลงเลยครับเค้าบอกว่ามันเป็นตัว starter kit อารมณ์นั้นครับ ก็น่าจะเหมือนของ Vue.js webpack ครับผม

เเละเเล้วสิ่งที่ไม่คาดฝันก็มาอีก

windows 10 แม่มเอ้ย เหมาะกับการเขียนโค้ดจริงๆ ปัญหาก็ไม่รู้จะแก้อย่างไงดี ถอนหายใจเบาๆ ฮ่าๆๆ เปลี่ยนไปใช้ Mac book คงจะดีเเต่ไม่มีเงินไง ประเด็น

12 นาทีสำหรับการสร้างโปรเจค react สำหรับเครื่องผมอะนะ

เมื่อลงเสร็จเเล้ว

cd เข้าไปที่ Folder ที่เราสร้างไว้ของผมชื่อ ว่า learn-react ครับ

พิมพ์คำสั่ง

npm start

จากนั้นมันก็จะรันหน้าจอแบบนี้ครับ

เมื่อรันได้ครับ มันจะเปิด http://localhost:3000/ ให้เลยครับ

เเละหน้าเว็บก็จะเเสดงทันใดเลย ตื่นเต้น

หน้าตาเว็บครับผม

เเล้วก็เปิด ATOM เเล้วเราก็ อืม ไอ้สั ……เห้ย ฮ่าๆๆ

สเปก Laptop ที่ใช้ Intel core I3 geforce GT 420m CUDA core 1 GB Ram 4 GB HDD 500GB ก็โอนะ ทำไมมันช้าจัง

โอเคผมใช้เวลาที่เปิดช้า อ่านอะไรนิดหน่อยเกี่ยวกับ File ที่สร้างขึ้น มาจากการที่คุณสร้าง App react นั้นเองเราจะสังเกตว่าเราจะยุ่งเกี่ยวกับ folder อะไรบ้างผม คาดว่ามันจะเป็บเเบบนี้นะครับ

การเรียงไฟล์ตามนั้นนะครับ ถ้าใครลงเเล้วได้ตามนี้ ยกมือขึ้น

ใน ./src จะแบ่งตามนี้ครับ (ความเข้าใจส่วนตัวนะครับ)

ไฟล์ App.css เอาไว้ในส่วนของการทำ css

ไฟล์ App.js ไฟล์ components ที่กำหนดไว้ทำอะไร การทำงานต่างๆ ครับ

ไฟล์ App.test.js ทำเป็นไฟล์ test e2e มั้งหรือ chai อันนี้ไม่เเน่ใจครับ เเต่ทำ test เเน่นอนครับ

ไฟล์ index.css เเละ index.js ทำงานเหมือนกันเเต่ ไฟล์นี้จะเป็นตัวส่งไป Components render ไปยัง Dom มั้งเพื่อไป ลิ้งกับไฟล์ public ครับ

ด้วย document.getElementById(‘root’) นั้นเอง คล้าย Vue.js เลยครับ

ซึ่ง React cil นี้เรียงไฟล์ได้ อุบาทมาก ผมขอวางโครงสร้างใหม่เเล้วกันนะครับ

เรียงใหม่ดูดีขึ้นมาเลยครับ ฮ่าๆๆ

จากนั้นก็เเก้ Error เรื่องของ path เรียกไฟล์ต่างๆครับให้ถูกต้องมากยิ่งขึ้นครับ

แก้ที่ไฟล์ App.js เเละ Index.js ให้ถูกต้องครับ

เรามาลงมือกันเลยครับ

ผมเริ่มจากการ modify โค้ดอีกนิดเเล้วกันนะครับ

เป็น

ลองมาใช้ JSX ครับ ฮ่าๆๆ

ผมจะลองสร้าง code ในไฟล์ App.jsx นะครับ แบบเเยกComponent ดูครับ ตามนี้เลยครับ

มี App เป็นตัวหลักครับ เเล้วก็ Header Content แยกกันครับ

ส่วนโค้ดเก่าผมเอาออกไปเลยนะครับ เเล้วก็เเก้ css นิดหน่อยนะครับ ฮ่าๆๆ

หากใครเกิด error Self-Closing Tag ตามนี้เลยนะครับ ( code บรรทัด 13,14 ครับ แก้เเล้ว โดยการไม่ทำแบบนี้นะครับ <header></hearder>)ครับ เเค่นั้นเอง

ผลที่ได้
สุดยอดเลย ฮ่าๆ

เดี๋ยวขอเปิดเพลงก่อนนะครับ โครตเพราะเเนะนำจริงๆ

เพลงโครตเพราะ

จากนั้นเราก็มาดูอีกเรื่องที่น่าสนใจครับ คือการสร้างตัวแปรครับ

เดี๋ยวมาลองกันนะครับ อิอิ

ผมลองเพิ่ม code เข้าไปในส่วนของข้อมูล data array เพื่อรับค่า กิจกรรมที่ผมจะทำเป็น list นะครับ

ทำที่ไฟล์ App.jsx นะครับ เเล้วสิ่งที่สำคัญคือโครงสร้างมันจะดู งงๆ ผมเขียนครั้งเเรกยัง งง เลยครับ อ่อ อย่าลืมเปิดเพลงไปด้วยนะครับ เดี๋ยวเครียด

เห็นสิ่งที่ต่างกันข้อนึ่งเลยครับ React.js กับ Vue.js

การ repeat ข้อมูลที่เป็น array ครับ ของ

vue.js มี v-for

angular มี ng-repeat

React.js มี array function เย็ดเข้ๆ โหดสัส

ใครอยากเรียน array function เเนะนำเลยครับ

ไปลองโค้ดได้เลยนะครับ กำลังพัฒนากันอย่างต่อเนื่องครับ

โดยมี อาจารย์เนติ กับรุ่นน้องที่ร่วมกันทำนะครับ ฮ่าๆๆ

เรียนเรื่อง Vue.js กับ อ.เนติ (Nati Namvong)

ต่อๆๆ เห้ย ต่อๆๆ

จากนั้นเราลองมาโชว์ array แบบ feed กันดีกว่าเนาะ ฮ่าๆๆ

ผมทำต่อไปอีกนิด ปัญหาคือ ผมต้องการทำเป็น list order ฮ่าๆๆ มัน map เเล้วมันดันต่อกันผมเลยสร้าง component ขึ้นมาเพื่อทำการ feed ข้อมูลออกมาครับ

แม่ม เหมือนแอบยัดเยียดการเขียนแบบแยก components สะงั้น ฮ่าๆ

หากเจอ issues เกี่ยวกับการ ‘data’ is missing in props validation

TableRow.propTypes = { data: React.PropTypes.string.isRequired }

ควร validation props สำหรับการส่งค่าข้าม component สะก่อนครับ ไม่งั้น error standard

จากนั้นผมก็ งง Doc React จนได้ว่าจะไม่ งง เเล้วนะครับ

ผมก็ลองหาจากนี้ดูครับ

มันมี methods เพื่อตรวจจับ event ทั้งนั้น ผมขอเน้นที่ตัว

handleClick () {} // ของ jsx ครับ

ไม่รู้ว่าหลักการจริงๆเเล้ว เวลาเรามีหลาย function เราสามารถที่จะใช้หลักการแบบส่งชื่อ functionไป เเล้วเวลาเรียก ก็ใช้งานแบบ นี้ครับ (คิดเองสดๆเลย)

this.=ชื่อฟังก์ชัน.bind(this, ‘parameter’)

หรือ

this.=ชื่อฟังก์ชัน.( ‘parameter’)

ถ้าไม่ทำมันจะคลิกเเล้วไม่ไปไหนนะเอง

อีกอย่างที่ควรรู้ของการส่ง data ของจาก tag ของ input ต่างๆของ html ด้วยครับ

เราจะใช้งานในส่วนของ คำสั่ง ref ครับผม ถ้าอยากให้ถาพก็ตามนี้เลยครับ ฮ่าๆๆ

step การส่งค่าคือ

<input type=’text’ ref=’todoList’ ></input>
 <button onClick={() => this.addTodoList()}>ADD</button>

ตามด้วย functon ที่เราคิดชื่อมาเลยครับ

addTodoList () {
 const input = this.refs.todoList
 console.log(input.value)
 }

ผมว่ามันยังไม่ถูกต้องสักทีเดียว ฮ่าๆๆ โกงๆ ไงก็ไม่รู้ ฮ่าๆๆ

ผมจัดการเขียน code ตามนี้เลยครับ

ทำตามนี้เราจะได้ผลลัพธ์ดังนี้ครับ
ได้ log มาเพื่อเอาไปเก็บใน array ฮ่าๆๆ

โอเคครับ จากนั้นผมก็โมโค้ดใหม่เพิ่มเพราะเราต้องการส่งค่าข้ามไปยัง component ครับนี้คือสิ่งที่ยากของ react เเต่ไม่ต้องกลัวครับ ถ้าอ่าน doc มายังไงก็งง ครับ ฮ่าๆๆ

ผมลองถูกลองผิดจนได้ในที่สุดครับ

ฮ่าๆๆ เพราะปัญหามีทางแก้ครับ ปัญหาที่เมื่อรัน code ไปเเล้วมันจะไม่ feed

ออกมาเเน่นอนครับ เพราะมันยังไม่ถูก setState นั้นเองครับ

มาถึงตรงนี้มีใครเปิดเพลงที่ผมโพสต์ฟังมั้งครับ ฮ่าๆๆ

หากมีปัญหาจงอ่านนี้เลยครับ

การ setState React.js

การ set React.PropTypes

เเละนี้คือความสำเร็จของการทำ todoList ของข้าพเจ้า ฮ่าๆๆ

โปรดใช้จิตวิญญาณในการทำครับผมเชื่อว่าทุกคนทำได้ ฮึบๆ

สรุปจากที่ลองทำนะครับ

ดูๆรวมเเล้วมีเสน่ห์เหลือเกิน ถุย จะเห็นได้ว่ามันเป็นเรื่องใหม่ของผม ทำอะไรยังคงไม่ถนัดนักสำหรับมัน เเต่ตอนนี้ขอบอกเลย มันเป็นประสบการณ์ที่ดีในการเริ่มต้นสิ่งใหม่ครับ

ความยาก

มันไม่เชิงยากหากจะเริ่มต้นใหม่อีกครั้งนะครับ

ผมลองทำเเล้วตราคุณเเล้วที่ต้องลองทำ

Github : https://github.com/infernalslam/reactjs_props_component

ขอตัวไปอ่านหนังสือก่อนนะครับ

ว่างๆจะลองทำลบกัน เเต่อาจจะต้องเพิ่ม pk ให้กับ array เผื่อต้องการจะลบนะครับ

วันไปล่ะบานเเจ้ๆๆๆๆๆๆๆๆๆๆ

เวลาที่ใช้ 4 ชม ครึ่ง รวมเวลาเขียน medium ด้วยนะครับ