หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ถนนสู่จาวาสคริปต์ที่ทันสมัยและตอบสนอง

จุดประสงค์ของคู่มือนี้คือการจัดทำรายการ Ressources ฟรีหลายรายการ (บทความหนังสือวิดีโอ?) ซึ่งจะช่วยให้คุณเรียนรู้ JavaScript ที่ทันสมัยและห้องสมุด React

คู่มือนี้ไม่ได้หมายถึงรายการทุกสิ่งที่คุณต้องรู้เกี่ยวกับ JavaScript หรือ React ฉันพยายามที่จะแสดงรายการสิ่งที่จะมีประโยชน์ถ้าคุณยังใหม่กับโลกนี้ตามประสบการณ์ของฉันและผู้คนที่ฉันพบ หากสิ่งที่คุณโปรดปรานไม่ได้อยู่ในรายการมันไม่ได้หมายความว่าฉันไม่ชอบหรือไม่อนุมัติ ตัวอย่างเช่น typescript หรือ graphql นั้นยอดเยี่ยม แต่ฉันไม่คิดว่ามันจะจำเป็นต้องเรียนรู้ว่า เป็นผู้เริ่ม ต้นก่อน

1) จาวาสคริปต์สมัยใหม่?

บทเรียนที่ครอบคลุมทุกอย่าง:

  • เรียนรู้การพัฒนาเว็บจะสอน HTML และ CSS ให้คุณ
  • JavaScript ที่มีคารมคมคายเหมาะอย่างยิ่งในการเรียนรู้ JS และแนวคิดการเขียนโปรแกรมทั่วไป
  • การสอน JavaScript ที่ทันสมัยว่าตอนนี้ทำอย่างไร จากพื้นฐานไปจนถึงหัวข้อขั้นสูงด้วยคำอธิบายที่เรียบง่าย แต่มีรายละเอียด
  • เรียนรู้ ES6 (ECMASCRIPT 2015)? หากคุณเคยเขียน JavaScript เมื่อไม่นานมานี้และอยากจะทันกับไวยากรณ์ที่ทันสมัย

บทความและวิดีโอที่ฉันชอบ:

  • JavaScript สมัยใหม่อธิบายถึงไดโนเสาร์คุณจะได้เรียนรู้พื้นฐานเกี่ยวกับ NPM, Babel, Webpack ฯลฯ และประวัติเบื้องหลัง
  • การทำความเข้าใจการยกใน JavaScript หากคุณมาจากภาษาการเขียนโปรแกรมอื่นคุณอาจรู้สึกไม่สบายใจกับวิธีที่เราสามารถประกาศตัวแปรใน JS บทความนี้จะช่วยให้คุณรู้สึกดีขึ้น!
  • ดีบัก JavaScript? Firefox หรือ Edge ยังมี devtools ของตัวเอง แต่โดยส่วนตัวแล้วฉันชอบใช้โครเมี่ยมเมื่อเขียนโค้ด
  • การเขียนโปรแกรมฟังก์ชั่นใน JavaScript? วิดีโอเหล่านั้นทำโดยนักพัฒนา Spotify JS ในอดีต เขาจะสอนแนวคิดที่สำคัญเช่นสัญญาการปิดหรือฟังก์ชั่นการสั่งซื้อที่สูงขึ้น สิ่งเหล่านั้นเป็นสิ่งจำเป็นในการตอบสนอง
  • องค์ประกอบเหนือมรดก? ที่โรงเรียนฉันต้องทำรายการออบเจ็กต์ที่มุ่งเน้น วิดีโอนี้ช่วยให้ฉันเข้าใจว่าทำไมจึงไม่จำเป็นเสมอไป

เอกสาร

บางครั้งคุณจะต้องค้นหาเอกสารเช่นหากคุณไม่ทราบคำหลักเฉพาะใน codebase หรือคุณต้องการเรียนรู้วิธีใช้ฟังก์ชั่นดั้งเดิม แน่นอนคุณสามารถใช้เครื่องมือค้นหาหรือ stackoverflow ได้ แต่ฉันขอแนะนำให้ใช้เอกสารเว็บ MDN

2) ตอบสนอง⚛

  • React คืออะไร: การแนะนำภาพสำหรับผู้เริ่มต้น
  • จาวาสคริปต์ที่จะรู้ว่าปฏิกิริยา
  • เอกสารอย่างเป็นทางการเป็นสถานที่ที่ดีที่สุดในการเรียนรู้ React
  • คู่มือเริ่มต้นเพื่อตอบสนอง?
  • เคล็ดลับการตอบสนองแบบก้าวหน้าเพื่อทำให้ไซต์ตอบสนองของคุณมีประสิทธิภาพ Web.dev ยังมีบทความมากมายเช่นนั้น
  • รูปแบบการเรียนรู้รูปแบบสำหรับการสร้างเว็บแอพที่ทรงพลังด้วยวานิลลาจาวาสคริปต์และตอบสนอง

ตะขอ? ส่วนประกอบชั้นเรียน

ตะขอมีปฏิกิริยาเฉพาะเจาะจงมากฉันขอแนะนำให้คุณตรวจสอบว่าทำไมต้องตอบสนองต่อตะขอ? - เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับประวัติตอบสนองและหรือทำไมตอนนี้เราใช้ตะขอ คุณอาจต้องการเรียนรู้เกี่ยวกับส่วนประกอบของคลาสและรูปแบบบางอย่างที่ใช้ในการแบ่งปันตรรกะระหว่างส่วนประกอบ (ก่อนที่จะมาถึงตะขอ) เนื่องจากยังมีอยู่ในรหัสฐานจำนวนมาก:

  • เปรียบเทียบไดอะแกรมการไหลของตะขอกับไดอะแกรมวิธีการใช้งานองค์ประกอบของคลาส
  • ส่วนประกอบลำดับที่สูงขึ้น: รูปแบบการออกแบบแอปพลิเคชันปฏิกิริยา
  • แสดงอุปกรณ์ประกอบฉาก

การจัดการรัฐและห้องสมุดอื่น ๆ

เมื่อถึงจุดหนึ่งคุณอาจคิดว่าคงจะดีถ้าสามารถเข้าถึงสถานะของโลกบางชนิดในองค์ประกอบที่ตอบสนองใด ๆ เพื่อหลีกเลี่ยงการส่งผ่านอุปกรณ์ประกอบฉากซ้ำแล้วซ้ำอีก ... ผู้คนอาจบอกให้คุณใช้ Redux หรือ Mobx หรือ Apollo หรือ Xstate หรือ [แทรกชื่อห้องสมุดยอดนิยม] เพื่อให้ได้มา ฉันขอแนะนำให้อ่านบทความการจัดการสถานะการจัดการของรัฐและวิธีการเลือกที่จะได้รับภาพรวมที่ดี React Libraries สำหรับปี 2023 จะจัดการเรื่องนี้และอีกมากมาย!

3) อะไรต่อไป!? -

  • ติดตามข่าวสารล่าสุดและค้นพบสิ่งใหม่ ๆ ด้วยจดหมายข่าว React และจดหมายข่าว Bytes;
  • การฝึกทำปฏิกิริยากับ Create-React-App หรือโดยตรงในเบราว์เซอร์ของคุณบน codesandbox
  • สร้างแอพพร้อมการผลิตด้วย: Vite, Next.js, Gatsby, React Native ผ่าน Expo;

แล้วสไตล์ล่ะ? -

พื้นฐานบางอย่าง

  • เรียนรู้ CSS หลักสูตร CSS ที่เขียวชอุ่มตลอดปีและอ้างอิงถึงระดับความเชี่ยวชาญในการจัดแต่งทรงผมของเว็บ
  • CSS ที่ทันสมัยอธิบายสำหรับไดโนเสาร์
  • CSS-in-JS หรือ CSS-and-JS
  • การจัดแต่งทรงผมและ CSS React React Doc

ห้องสมุด Somne คุณสามารถใช้ในการจัดการสไตล์ของคุณ:

  • ลมลม
  • โมดูล CSS
  • วานิลลา-สกัด
  • อารมณ์
  • ส่วนประกอบที่มีสไตล์ฉันคิดว่าพวกเขาเป็นสิ่งที่ดีที่สุดในระหว่างทางเลือกสำหรับผู้ที่เคยเขียน CSS "คลาสสิก" และต้องการใช้ประโยชน์จากการผสมกับ JavaScript

ระบบออกแบบ

บางทีคุณอาจต้องการสร้างแอพและหลีกเลี่ยงการใช้เวลามากในการเขียน CSS และ HTML ฉันขอแนะนำให้คุณใช้ห้องสมุดเช่นวัสดุ -ui, การออกแบบมดหรือโพลาริส หากคุณต้องการสร้างระบบการออกแบบของคุณเองฉันขอแนะนำให้คุณอ่านการออกแบบอะตอม

แล้วการทดสอบล่ะ? -

  • แต่จริงๆแล้วการทดสอบ JavaScript คืออะไร?
  • วิธีการใช้การสอนการทดสอบการทดสอบไลบรารีทำความเข้าใจกับความตลกขบขันและเรียนรู้วิธีการเขียนการทดสอบอัตโนมัติผ่านไลบรารีการทดสอบปฏิกิริยา (มีห้องสมุดทดสอบอื่น ๆ แต่ RTL เป็นสิ่งที่ดีมากที่ได้รับคำแนะนำจาก DOC อย่างเป็นทางการ)
  • การทำความเข้าใจกับการเยาะเย้ยล้อเลียนที่ตลกขบขันเป็นเทคนิคในการแยกวิชาทดสอบโดยการแทนที่การพึ่งพาด้วยวัตถุที่คุณสามารถควบคุมและตรวจสอบได้
  • ทำไมต้องไซเปรส? - ห้องสมุดเพื่อเขียนการทดสอบแบบ end-to-end และอื่น ๆ ;

เครื่องมืออื่น ๆ ที่ฉันเป็นค่าเริ่มต้น

  • Code Editor: VS Code;
  • รูปแบบรหัสอัตโนมัติ: สวยกว่า;
  • Linter: Eslint;
  • จัดการ Git ผ่าน UI แทนคำสั่ง: SourcetRee หรือ VS Code;
  • สร้างและปรับใช้แอพของคุณ: netlify;
  • การบูรณาการอย่างต่อเนื่อง: Travis CI;
  • ซื้อชื่อโดเมน: Google Domains;

ไลบรารีอื่น ๆ ที่ฉันเป็นค่าเริ่มต้นเป็น

  • การกำหนดเส้นทาง: React-Router;
  • ความเป็นสากล: Linguijs;
  • พัฒนาส่วนประกอบของคุณโดดเดี่ยวและแบ่งปันให้กับทีมของคุณผ่านนิทาน ปรับใช้นิทานของคุณและเรียกใช้การทดสอบภาพหน้าจอในแต่ละเรื่องผ่านทางสี
  • API เยาะเย้ยเมื่อทำการทดสอบ: ผู้ปฏิบัติงานบริการเยาะเย้ย;

หลักสูตรที่จ่ายเงิน?

สิ่งที่ฉันแนะนำหลังจากทำเสร็จแล้ว:

  • หลักสูตร WES BOS? JavaScript, React, CSS และอื่น ๆ ; บางคนก็ ฟรี !
  • หลักสูตร Kent C. Dodds? ตอบสนองการทดสอบ
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด