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

React.js การออกกำลังกาย

แบบฝึกหัดนี้มีไว้สำหรับคุณที่จะทำความคุ้นเคยกับแนวคิดการตอบสนองพื้นฐานในวิธีการโต้ตอบเช่นเดียวกับคุณที่จะได้รับการพัฒนาอย่างสะดวกสบายในสภาพแวดล้อมที่ทันสมัย ​​node.js โครงการนี้จะแบ่งออกเป็นหลายส่วน แต่ละส่วนจะครอบคลุมแนวคิด React/Frontend พื้นฐาน

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

ความต้องการ

  • โหนดเวอร์ชัน 8.x
  • NPM เวอร์ชัน 5.x

ติดตั้งโหนดและ NPM ที่นี่

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

 node -v

 npm -v

การตั้งค่า

ติดตั้ง React Devtools เพื่อแก้ไขข้อบกพร่องได้อย่างง่ายดายและดูว่าเกิดอะไรขึ้นในแอพ React ของคุณ

ตัวแก้ไขข้อความของคุณอาจไม่สนับสนุนไวยากรณ์ JSX ที่ใช้ในโครงการนี้ แต่อาจมีปลั๊กอินเพื่อให้ได้การไฮไลต์ไวยากรณ์ที่เหมาะสม ตัวอย่างเช่นข้อความประเสริฐใช้ปลั๊กอิน Babel

ก่อนอื่นส้อมที่เก็บนี้ ปุ่มส้อมที่ด้านบนขวาของคุณ สิ่งนี้คือสำเนาที่เก็บนี้ไปยังบัญชีของคุณ ตอนนี้คุณควรมีที่เก็บที่มีชื่อ <yourusername>/react-exercise

มันควรจะเป็นแบบนี้ (ชื่อผู้ใช้ของฉันคือ Davidachang): ส้อม

จากนั้นโคลนพื้นที่เก็บข้อมูลนี้ (คลิกปุ่มสีเขียวโดยบอกว่า "โคลนหรือดาวน์โหลด" เลือก http และคัดลอกและวางที่ตำแหน่ง <url> ) และเข้าไปในนั้น: 

 $ git clone <url>
$ cd react-exercise

ติดตั้งการพึ่งพาโครงการ: 

 npm install

หลังจากเสร็จสิ้นให้เรียกใช้สิ่งนี้เพื่อเริ่มการพัฒนา: 

 npm start

สิ่งนี้จะเริ่มเรียกใช้แอพและเปิดโดยอัตโนมัติที่ http: // localhost: 3000 เมื่อใดก็ตามที่คุณเปลี่ยนและบันทึกรหัสมันจะโหลดซ้ำโดยอัตโนมัติ! สิ่งนี้จะยังคงเป็นกระบวนการที่ทำงานอยู่ในเทอร์มินัลของคุณดังนั้นคุณจะต้องเปิดแท็บหรือหน้าต่างใหม่เพื่อดำเนินการคำสั่งอื่น ๆ

การตั้งค่าเสริม

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

ไม่จำเป็นสำหรับแบบฝึกหัดนี้ แต่มีปลั๊กอินที่สวยกว่าที่คุณสามารถติดตั้งสำหรับตัวแก้ไขของคุณ ดูคำแนะนำที่นี่

ส่วนที่ 1

เป้าหมาย: ทำความคุ้นเคยกับไวยากรณ์ JSX โครงสร้างส่วนประกอบและอุปกรณ์ประกอบฉากที่ผ่าน

งาน:

  • ส่ง prop shouldDisplayImage ในส่วนประกอบ Instructions ที่กำหนดว่าจะแสดงคำใบ้โลโก้ H4i หรือไม่

ตอนที่ 2

เป้าหมาย: ทำความคุ้นเคยกับรายการการแสดงผลและฟังก์ชั่นอาร์เรย์ JavaScript

งาน:

  • ส่ง items prop ไปยังส่วนประกอบ Instructions ที่มีรายการสตริง
  • แสดงรายการกระสุนของ items ทั้งหมด
  • ลบรายการทั้งหมดที่มีความยาวน้อยกว่า 3 อักขระ
  • สร้างรายการตัวพิมพ์ใหญ่ ทุกรายการ
  • ทำสิ่งนี้โดยไม่ for ใช้หรือ while ลูป
  • วิดีโอที่มีประโยชน์มากที่จะดู:
  • การเขียนโปรแกรมฟังก์ชั่นอินโทร - เพียงสองวิดีโอแรกก็เพียงพอแล้วแม้ว่าจะมีหลายสิ่งที่ต้องเรียนรู้จากส่วนที่เหลือของเพลย์ลิสต์และวิดีโออื่น ๆ ของเขา! (ขอแนะนำให้สมัครสมาชิก)
  • รายการแสดงผลใน React

ส่วนที่ 3

เป้าหมาย: ทำความคุ้นเคยกับสถานะส่วนประกอบ

งาน:

  • สร้างองค์ประกอบ Counter ใหม่
  • กำหนดสถานะเริ่มต้นของ count เป็น 0
  • แสดงค่าของจำนวนปัจจุบัน
  • สร้างสองปุ่มปุ่มที่เพิ่มจำนวนและปุ่มที่ลดลง คำใบ้

ตอนที่ 4

เป้าหมาย: ทำความคุ้นเคยกับการป้อนข้อมูลผู้ใช้

งาน:

  • ใน App.js สร้างอินพุตและปุ่มส่งที่ตั้งค่าสถานะ initialCount
  • ตรวจสอบการป้อนข้อมูลผู้ใช้เพื่อให้แน่ใจว่าถูกต้อง (เป็นตัวเลข)
  • ผ่านสถานะ initialCount เป็นเสาในองค์ประกอบ Counter และใช้ค่านี้เป็น count เริ่มต้นใน Counter ตรวจสอบให้แน่ใจว่าต้องระวังประเภทเมื่อทำเช่นนี้เนื่องจากผู้ใช้อินพุตเป็น String และเราต้องการส่ง Number
  • โบนัส: แสดงความคิดเห็น UI หากการป้อนข้อมูลผู้ใช้ไม่ถูกต้อง (ข้อความง่าย ๆ จะทำ)
  • หมายเหตุ: หากปุ่มของคุณรีเฟรชหน้าให้โยนปุ่มประเภท: <button type="button" ...

ส่วนที่ 5

เป้าหมาย: เข้าใจการสื่อสารของรัฐ/อุปกรณ์ประกอบฉากระหว่างส่วนประกอบพี่น้อง

งาน:

  • เลื่อนปุ่ม input และส่งไปยังส่วนประกอบของตัวเองที่เรียกว่า InitialCountForm ซึ่งเป็นลูกของส่วนประกอบ App
  • ยืนยันว่าฟังก์ชั่นของความสามารถในการกำหนดจำนวนเริ่มต้นของตัวนับผลงาน
  • อาจมีประโยชน์: react Component Lifecycle โดยเฉพาะ ComponentWillReceiveProps เกี่ยวข้องกับการสัมผัสกัน: React Cheat Sheet
  • มีประโยชน์: การขยับสถานะในต้นไม้

ตอนที่ 6

เป้าหมาย: ทำความคุ้นเคยกับ CSS/SCSS และสไตล์

งาน: ไม่มีอะไรเฉพาะเล่นกับสไตล์!

หมายเหตุ: คุณสามารถสร้างไฟล์ SCSS และพวกเขาจะถูกรวบรวมโดยอัตโนมัติไปยังไฟล์ CSS เมื่อคุณบันทึก แต่คุณต้องนำเข้าไฟล์ CSS ลงในส่วนประกอบของคุณ

แหล่งข้อมูลที่เกี่ยวข้องกับสไตล์บางอย่าง:

  • เรียนรู้เลย์เอาต์
  • คำแนะนำที่สมบูรณ์สำหรับ FlexBox
  • รูปแบบ BEM

ทรัพยากร

คู่มือการเริ่มต้นของ React
MDN - การแนะนำให้กลับมาใช้ JavaScript
คู่มือผู้เริ่มต้นเพื่อตอบสนอง
ตอบสนองเอกสาร
คู่มือสไตล์ JavaScript ของ Airbnb
คู่มือสไตล์การตอบสนองของ Airbnb
คู่มือสไตล์ CSS ของ Airbnb

การส่ง

เมื่อคุณทำตามขั้นตอนทั้งหมดให้ผลักดันการเปลี่ยนแปลงของคุณไปยัง GitHub Repo ของคุณ!

ก่อนที่คุณจะสามารถส่ง PR คุณจะต้องผลักดันสาขาของคุณไปยังสาขาระยะไกล (อันที่อยู่ใน GitHub ไม่ใช่ท้องถิ่น)

ตรวจสอบว่าคุณอยู่ในสาขาของคุณ: 

 git branch

หากคุณต้องการให้แน่ใจว่าการกระทำทั้งหมดของคุณอยู่ใน: 

 git log

กด Q เพื่อออกจากหน้าจอ git log

ผลักดันการกระทำของคุณไปยังสาขาระยะไกลของคุณ: 

 git push

ครั้งแรกที่คุณทำสิ่งนี้คุณอาจได้รับข้อผิดพลาดเนื่องจากยังไม่มีสาขาระยะไกลของคุณ โดยปกติจะบอกคำสั่งที่ถูกต้องที่จะใช้: 

 git push --set-upstream origin <YOUR_BRANCH_NAME>

หมายเหตุ: สิ่งนี้จะต้องทำในครั้งแรกที่คุณผลักดันสาขาใหม่ คุณสามารถใช้เพียงแค่ git push หลังจากนั้น

เมื่อทำเสร็จแล้วโปรดส่งอีเมลไปที่ [email protected] พร้อมลิงค์ไปยังที่เก็บ ข้อมูล และชื่อสาขาของคุณ เราจะต้องมีสองสิ่งนี้เพื่อดูการส่งของคุณ 

 H A C K 4 I M P A C T
                    H A C K 4 I M P A C T
                                        H A C K 4 I M P A C T
                                                            H A C K 4 I M P A C T
                                                                                H A C K 4 I M P A C T
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด