Skip to content
CodingThailand's Blog
CodingThailand's Blog

by โค้ชเอก

  • Home
  • About Me
  • CodingThailand.com
CodingThailand's Blog

by โค้ชเอก

Category: React

มีอะไรใหม่ใน React Native 0.76

โค้ชเอก, 23/11/202423/11/2024

// Sync response from Native Moduleconst value = nativeModule.getValue(); // value can be a reference to a native objectnativeModule.doSomething(value); สุดท้าย ไม่เกี่ยวสักเท่าไหร่แต่มีข่าวว่าพนักงาน full-time ของ Flutter ถูกเลิกจ้าง แม้ Google จะยืนยันว่าไม่ทิ้ง Flutter แต่ก็มีนักพัฒนาแยกออกมาทำโครงการ Flock (fork of Flutter) มารวมตัวกันสร้างเป็น Flutter+ อนาคตของ Flutter จะเป็นอย่างไรก็ต้องรอดูกันต่อไปนะครับ เรียน React Native กับโค้ชเอก ดูที่นี่ครับ https://codingthailand.com/react_native_2024_live/ โค้ชเอก Views: 16106

Continue Reading

แนะนำ 15 ไลบรารี ของ React ที่น่าใช้ในปี 2020

โค้ชเอก, 18/04/202018/04/2020

1. สร้าง QRCode แบบง่าย ๆ ลองตัวนี้▸ https://github.com/zpao/qrcode.react .2. สร้าง rich text editor ง่าย ๆ ด้วย React Quill▸ https://zenoamaro.github.io/react-quill .3. ครอบตัดรูปภาพด้วย React Image Crop▸ https://github.com/DominicTobias/react-image-crop .4. drag and drop รูปภาพ เพื่อเตรียมอัปโหลดด้วย react-dropzone▸ https://react-dropzone.js.org/ .5. สร้างปฏิทินกิจกรรม หรือ events calendar ด้วย react-big-calendar▸ https://github.com/jquense/react-big-calendar .6. จัดการข้อมูลรูปแบบตารางสวยๆ ด้วย react-bootstrap-table2 (สำหรับคนใช้ Bootstrap)▸ https://react-bootstrap-table.github.io/react-bootstrap-tab… .7. Datepicker ไว้สำหรับ input ข้อมูลแบบปฏิทิน▸ https://github.com/Hacker0x01/react-datepicker .8. ทำ notification สวยๆ…

Continue Reading

แนะนำ React Hook Form

โค้ชเอก, 18/04/202018/04/2020

สำหรับคนที่เขียน React หรือ React Native อยู่ ลองใช้ไลบรารีฟอร์มตัวนี้ได้ครับ “React Hook Form” .ปกติคนที่เขียน React หรือ React Native น่าจะเคยใช้ Formik และ Redux Form กันมาบ้าง วันนี้มาแนะนำอีก 1 ทางเลือกครับ และน่าจะเป็นทางเลือกใหม่ที่ดีด้วย มาดูกันว่า react-hook-form มีข้อดีอะไรบ้าง .1. re-render ที่่น้อยลง (ทำให้ประสิทธิภาพดีขึ้น) กว่า Formik และ Redux Form .2. ใช้เวลาเรียนรู้ไม่มาก เขียนโค้ดสั้นลงกว่า Formik และ Redux Form .3. ใช้ React Hooks .4. ขนาดเล็กมากแค่…

Continue Reading

4 ข้อควรรู้เกี่ยวกับ React Hooks

โค้ชเอก, 25/02/202025/02/2020

Hooks เป็นฟีเจอร์ใหม่ที่มาพร้อมกับ React เวอร์ชัน 16.8 เพื่อให้เราสามารถใช้งาน state และเรียกใช้ features ต่างๆ ของ React ได้ โดยที่ไม่ต้องเขียนแบบ class component ยกตัวอย่าง เช่น เราสามารถใช้ useEffect แทน componentDidMount ได้ เป็นต้น .ส่วนคนที่เขียน React Native ก็เขียนได้เลยนะ แต่ต้องเป็นเวอร์ชัน 0.59 ขึ้นไปครับ .1. แนะนำให้เขียน React Hooks สำหรับโปรเจคใหม่เลย (ในหลักสูตรใหม่ที่ผมจะเปิดสอนจะพาเขียน Hooks เป็นหลักทั้งหมดครับ แต่จะพูดถึง class component ด้วยเช่นกัน) ถ้าโปรเจคเดิมใช้แบบ class component อยู่ก็ไม่ต้องตามแก้เป็น Hooks นะครับ ใช้ของเดิมได้เลย…

Continue Reading

มีอะไรใหม่ใน React 16.9.0

โค้ชเอก, 25/02/202025/02/2020

มาดูกันว่า React เวอร์ชันนี้ มีอะไรน่าสนใจบ้าง 🙂 .1. กำลังจะยกเลิกคำสั่ง javascript: ที่เราใส่ใน href ของ tag <a></a> ครับ เพราะอาจเสี่ยงต่อการถูกโจมตีและความปลอดภัย (cross-site scripting) หากใครอัปเดตเวอร์ชันนี้จะมี warning ออกมาครับ อนาคตจะเอาออกแล้ว แน่นอนจะมี error แสดงเลย หากใครต้องการใช้อยู่ก็แนะนำให้ใช้ dangerouslySetInnerHTML แทนนะ ดูเพิ่มเติมได้ที่ => http://bit.ly/2N0pJsc .2. ในอนาคต (เวอร์ชัน 17) จะมีการนำ lifecycle methods ออกไปทั้งหมด 3 methods ได้แก่ componentWillMount, componentWillReceiveProps, componentWillUpdate แล้วนะครับ ถ้าในเวอร์ชันนี้ (16.9.0) ก็ยังใช้ได้แต่จะมีการแจ้งเตือนออกมา (warning) เค้าแนะนำให้เราเติมคำว่า UNSAFE_ เข้าไปด้านหน้าชื่อ…

Continue Reading

ศึกษา React ลองดูชีทสรุปเรียงตามนี้

โค้ชเอก, 03/08/201903/08/2019

สำหรับคนที่เพิ่งเริ่มต้นศึกษา React ลองดูชีทสรุปเรียงตามนี้นะครับ จะทำให้เห็นภาพรวมของ JavaScript ES6+, React และ Redux ได้เป็นอย่างดี จะได้ดูด้วยว่าเราศึกษามาถูกทางหรือเข้าใจอย่างดีแล้วหรือไม่ ลองดูครับ 🙂 . 1. JavaScript ES6+ => https://devhints.io/es6 2. React => https://devhints.io/react 3. React และ React Redux => https://devhints.io/redux . อ้อ อีกอันนึงคือ patterns การเขียน React ครับ ลองเช็คดูซิว่าเราเคยเขียนหรือยังไม่เคย patterns ไหนบ้าง ดูได้ที่ => https://reactpatterns.com . โค้ชเอก Views: 470

Continue Reading

แนะนำ React Lifecycle Methods

โค้ชเอก, 03/08/2019

สำหรับคนที่เพิ่งเขียน React หรือ React Native ใหม่ๆ เวลาอ่านเอกสารของ React เรื่อง React Lifecycle Methods อาจจะงงๆ เรื่องลำดับ และขั้นตอนการทำงานของ method แต่ละตัว แนะนำให้เข้าไปดูไดอะแกรมในเว็บนี้ได้ครับ เราสามารถคลิกเข้าไปดูรายละเอียดของแต่ละ method ได้เลย . รายละเอียด: http://bit.ly/2I4Ngax โค้ชเอก Views: 124

Continue Reading

Posts ล่าสุด

  • การใช้งาน Prefetching ใน Next.js
  • 14 ข้อคิด เพื่อการเป็น Developer ที่ดีขึ้น จาก “Lee Robinson”
  • เคยเจอ “TypeError: Cannot read property ‘x’ of undefined” หรือเปล่า
  • บันทึกการเขียนเว็บไซต์ใหม่ในรอบ 10 ปี ย้ายมาใช้ Next.js
  • ทำไมการจัดการ Error ใน JavaScript ถึงเป็นเรื่องท้าทาย?

Recent Comments

    หมวดหมู่

    • .NET
    • AI
    • Android
    • Angular
    • Angular 2
    • Coding
    • CSS
    • Database
    • Editor
    • Flutter
    • Git
    • HTML5
    • Ionic 2
    • Ionic 4
    • Ionic Framwork
    • JavaScript
    • Laravel
    • Laravel 5
    • Next.js
    • Node.js
    • PHP
    • PHP 7
    • Plugins
    • React
    • React Native
    • Template
    • Tools
    • TypeScript
    • UI
    • Uncategorized
    • Vue.js
    • XAMPP
    • Yii
    • คอร์สเรียน
    • แรงบันดาลใจ

    Archives

    • July 2025
    • April 2025
    • November 2024
    • October 2024
    • April 2020
    • February 2020
    • August 2019
    • September 2018
    • August 2018
    • February 2018
    • November 2017
    • October 2017
    • August 2017
    • July 2017
    • April 2017
    • October 2016
    • August 2016
    • May 2016

    Tags

    .NET android Angular Angular 2 Atom Coding Coding Standard CSS CSS 3 Datepicker Express.js extensions Git HTML HTML5 Ionic2 JavaScript Laravel5 laravel 5.5 MariaDB Material Design MySQL Node.js npm PHP PHP7 plugins PouchDB recaptcha Restful sail.js template typescript typscript XAMPP Yii2

    ผู้เยี่ยมชม

    • 0
    • 1,818,113
    • 547,542
    • 3,656
    ©2025 CodingThailand's Blog | WordPress Theme by SuperbThemes