สร้างเมื่อ 10 september 2021 16:45 ด้วย ReactJS
สวัสดีครับ วันนี้ลองเขียนเว็บบล็อกด้วย ReactJS จึงได้มีโอกาสมาหัดเขียนบล็อกเป็นครั้งแรก ในบล็อกนี้จะมาเล่าถึงการเขียนเว็บนี้ว่าทำยังไง ใช้ tech stack อะไรบ้าง และเหตุผลส่วนตัวว่าทำไมถึงเลือกใช้งานเครื่องมือแต่ละตัว
- ReactJS สามารถเรียนรู้ได้เร็วและง่ายเพราะมีพื้นฐานมาจาก html javascript css มาก่อนอยู่แล้ว สามารถเรียนรู้การเขียนแอพบน android และ ios เพิ่มเติมได้ด้วย react native ซึ่งเป็น cross platform library ของทาง React เหมือนกัน
- react router dom เพื่อทำให้เว็บไซต์ของเรามีหลาย ๆ หน้า การไปยังหน้าอื่น ๆ หน้าที่หลัก ๆ ก็คือการทำ Routing กำหนด url ในการเข้าถึงเช่น หากต้องการไปยังหน้าแรกต้องเข้า ”/” หรือไปยังหน้าบล็อกต้องเข้า “/blog” ข้อดีคือสามารถป้องกันการเข้า url ของผู้ใช้งานได้
- styled-components ความสามารถที่จริงของมันก็คือการส่งค่าบางอย่างเข้าไปใน component แล้วสร้างเงื่อนไขได้ เช่น การเปลี่ยนแปลงค่าบางอย่างที่ css ต้องการ และ เราจะไม่ต้องปวดหัวกับไฟล์ css ในโปรเจคของเราอีกต่อไปเพราะเขียนอยู่ในไฟล์กันทั้ง html javascript และ css
- VS CODE หรือ Visual Studio Code คือเครื่องมือช่วยให้เราเขียน ReactJS ได้ง่ายขึ้นมาก ๆ เพราะมีส่วนขยายเยอะ เช่น Prettier - Code formatter ช่วยจัดเรียกโค้ดของเราโดยอัตโนมัติ vscode-styled-components หากไม่มีตัวนี้เราจะเขียน css แบบ styled-components ช้ามาก ๆ เพราะมันไม่ auto complete โค้ดให้เราเหมือนการในไฟล์ css แบบปกติ
- terminal ใน VS CODE เราสามารถเรียกใช้ comand line ภายในโปรแกรมได้จึงไม่จำเป็นต้องออกจากโปรแกรม จบในแอพเดียว
- ECMAScript (ES) คือ มาตรฐานง่ายๆสำหรับ JavaScript และการเพิ่มคุณสมบัติใหม่ให้กับ JavaScript จะสามารถช่วยเขียนโค้ดของเราได้สั้นและเข้าในง่ายก็เดิมหากมีความเข้าใจแล้ว
คล่าว ๆ ก็จะมีประมาณนี้ keyword สำหรับศึกษาความรู้ที่เกียวกับการเขียน React เพิ่มเติม เช่น jsx, react hook, layout component, private route, public route, redux, nextJS, Gasby โครงสร้างของโปรเจคและการวางโครงสร้างของโปรเจค
สุดท้าย ก็หวังว่าบทความนี้จะเป็นประโยชน์กับใครหลาย ๆ คนนะครับ ผมก็พึ่งหัดเขียนบล็อกเป็นครั้งแรกจริง ๆ หากเนื้อหาอ่านยากไปต้องขออภัยครับ