React-Native กับ material ui เฟรมเวิรค์สำเร็จรูปของ React

อีกหนึ่งของเล่นสำเร็จรูปที่ทำงานภายใต้สภาพแวดล้อม React ผมได้ลอง build แล้วเอาผลการทำงาน ที่เป็น User Interface (UI) สำเร็จรูปตัวนี้มาให้ดูกัน ผมเห็นคนสนใจตัวนี้เยอะ ผมก็เห็นว่าง่ายดี แล้วก็มีครบ คือ ตัวอย่างจะเขียนมาให้ครบ คือพวก event เช่น กดแล้วส่งค่า อะไรไป อะไรออกมา ได้ค่าอะไร เอาไปเขียนต่อได้ง่ายและรวดเร็วดี และที่สำคัญ UI พวกนี้ ออกแบบมาให้เสร็จ ไม่ต้องมานั่งแต่งอะไรมากมาก มี properties ให้เซ็ตด้วย แล้วแต่ style และความชอบของแต่ละคน

เนื้อหา วันที่ June 7, 2017 10:52 PM ความยาว 5 นาที  

รายละเอียด ตามลิงค์ด้านล่าง

https://github.com/callemall/material-ui

https://github.com/xotahal/react-native-material-ui


https://github.com/xotahal/react-native-material-ui-demo-app

Read More

Expo หนึ่งในเครื่องมือ ที่ทำงานบนพื้นฐาน React native

ผมได้ลองเล่น ตัว Expo ซึ่งเป็น Dev. Tools ตัวหนึ่ง ที่ทำงานบนพื้นฐานของตัว React Native มันมีข้อดีคือ สะดวก รวดเร็วในการพัฒนา และก็ การแสดง Error รายละเอียดต่างๆ จะดีกว่ามาก เพราะมันเหมือน เขียนโปรแกรม ครอบตัว React-Native ที่เราต้องใช้งานผ่าน Command Line พวก CLI

เนื้อหา วันที่ May 31, 2017 2:12 PM ความยาว 3 นาที

รายละเอียดเพิ่มเติม ตามลิงค์ข้างล่าง

https://expo.io

https://github.com/expo

Read More

ตอน 2-3 เรียนรู้จากเว็บ React Native

เรียนจาก เอกสารประกอบเว็บของ React Native ตามลิงก์นี้ https://facebook.github.io/react-native/releases/0.34/docs/tutorial.html รายละเอียดที่เว็บอธิบายจะค่อนข้างกระชับ คือ เป็นแค่อ้างอิง การใช้งาน คำสั่งๆ เท่านั้น จะไม่มีอธิบายตัวอย่างหลายๆ แบบ ดังนั้น หากใครศึกษาจากเว็บก็จะเห็นว่า ถ้าเขายกตัวอย่าง โปรแกรม มา 1 ชุด ก็จะเพื่อบอกรายละเอียดที่เขาต้องการให้รู้ จะไม่มี แบบ ยกตัวอย่าง อื่นๆ ให้เข้าใจมากขึ้น ดังนั้นผู้ที่สนใจ ควรจะหา ตัวอย่าง โปรแกรม เรื่องเดียวกันในแบบอื่นๆ ในการเรียนรู้

เนื้อหา วันที่ June 3, 2017 9:48 AM ความยาว 1 ชั่วโมง 

Read More

ตอน 2-2 ES6/ES2015 และ modern JS

 เรียนรู้ ES6/ES2015 (Modern Java Script จาวาสคริปต์ สมัยใหม่)
การเรียน React Native จำเป็นต้องรู้เรื่อง Java script ซึ่งตัว JS พัฒนามานานมาก และเปลี่ยนแปลง ไปจากสมัยแรกๆ อย่างมาก มันเป็นวิธีการเขียนที่ยืดหยุ่น และออกแบบให้เหมาะกับการเขียนโปรแกรมสมัยใหม่ ตัวโครงสร้าง หลักการ OOP รูปแบบต่างๆ ก็พัฒนาต่อเนื่อง เพื่อให้ท่านที่ไม่มีความรู้ หรือมองภาพเหล่านี้ไม่ชัดเจน จึงได้ รวบรวม เรียบเรียงเนื้อหานี้ขึ้นมา เพราะตัว ES6 จะเกี่ยวข้องอย่างมากกับการเขียน React Native ที่จะได้เรียนรู้ใน วิดีโอ ต่อๆ ไป


เนื้อหา วันที่ June 3, 2017 9:48 AM ความยาว 1 ชั่วโมง

Read More

ตอน 2-1 เรียนรู้เบื้องต้น เกี่ยวกับ React Native

จริงๆ ต้องบอกก่อนว่า ผมทำคลิปสอน React Native เพื่อจะอธิบาย ให้เพื่อน เพราะผมศึกษา แล้วต้องการให้พรรคพวก ไม่ต้องเสียเวลาไปศึกษา แล้วก็จะเขียน โปรแกรมประกอบ share ไว้ให้เพื่อน แต่พอโพสไปสักระยะ ก็เริ่มมีคนเข้ามาดูมากขึ้น ผมเห็นว่ามีประโยชน์ เลย ทำเว็บไซต์นี้ขึ้นมา เพื่อรวบรวม แต่เนื่องจากว่า มันไม่ใช่งานหลักที่ผมพัฒนา เป็นแค่ส่วนหนึ่งที่ผมควรจะรู้ แล้วใช้เขียนแอพมือถือ กับงานอื่นๆ ของผม เท่านั้น ดังนั้น ความต่อเนื่องในการนำเสนอ หรือเนื้อหาอาจจะไม่สมบูรณ์ และไม่ต่อเนื่อง ต้องขอ อภัย มา ณ. ที่นี้ด้วย

คลิป React ตอน 2-1 เรียนรู้เบื้องต้น เกี่ยวกับ React Native  ( สำหรับ คลิปตอน 1 จะเป็นการติดตั้ง ซึ่งต้องรอซ่อม หรือทำใหม่ )

เนื้อหา วันที่ May 28, 2017 1:53 AM ความยาว 1 ชั่วโมง

สอนเบื้องต้นเกี่ยวกับ react native ภาษาไทย

เนื้อหา อธิบาย พื้นฐาน โครงสร้าง รูปแบบ การเขียน โปรแกรม หรือพัฒนา แอพ มือถือ ด้วย react native

ถ้าเราพอจะทราบเกี่ยวกับ java script บ้าง ไม่มีความรู้ react มาก่อน แต่มีพื้นฐาน การเขียนโปรแกรม (programming) ก็สามารถ เรียนรู้ react-native ได้

การ import , export module / component , การผ่านค่า  props , state ,
java script สมัยใหม่ ES5, ES6 , ES7 JSX และ babel transformer.
โครงสร้าง โปรแกรม AppRegistry จากนั้นก็ เริ่มสร้าง component แล้ว import ไปใช้งาน เสร็จแล้วก็ ผ่านค่า ด้วย props ต่อด้วย เรื่อง state แล้วก็ลอง StyleSheet แยกไปลงไฟล์ เพื่อประโยขน์ ในการพัฒนาแอพ ที่มีขนาดใหญ่ขึ้น จะได้ดูเป็นระเบียน และง่ายในการจัดการ

เนื่องจาก สอนสด จึงมีข้อผิดพลาดบ้าง อีกทั้ง ขาดการอธิบายหลายๆ ส่วนไป.

Read More