30 Days Of React
1.0.0
เรียนรู้กับ Asabeneh โดยเข้าร่วม การเข้ารหัส ที่กำลังจะมาถึง
ผู้แต่ง: Asabeneh Yetayeh
ตุลาคม 2563
วันที่ 1 >>
| # วัน | หัวข้อ |
|---|---|
| 00 | การแนะนำ วิธีใช้ repo ความต้องการ การตั้งค่า |
| 01 | ทบทวน JavaScript |
| 02 | เริ่มต้นใช้งาน React |
| 03 | การตั้งค่า |
| 04 | ส่วนประกอบ |
| 05 | อุปกรณ์ประกอบฉาก |
| 06 | รายการแผนที่และกุญแจ |
| 07 | ส่วนประกอบชั้นเรียน |
| 08 | รัฐ |
| 09 | การแสดงผลตามเงื่อนไข |
| 10 | โครงสร้างโฟลเดอร์โปรเจ็กต์ตอบสนอง |
| 11 | เหตุการณ์ |
| 12 | รูปแบบ |
| 13 | ส่วนประกอบที่ควบคุมและไม่สามารถควบคุมได้ |
| 14 | วัฏจักรชีวิตส่วนประกอบ |
| 15 | แพ็คเกจบุคคลที่สาม |
| 16 | ส่วนประกอบคำสั่งซื้อที่สูงขึ้น |
| 17 | เราเตอร์ตอบสนอง |
| 18 | ดึงข้อมูลกับ Axios |
| 19 | โครงการ |
| 20 | โครงการ |
| 21 | ตะขอ |
| 22 | แบบฟอร์มโดยใช้ hook |
| 23 | การดึงข้อมูลโดยใช้ hooks |
| 24 | โครงการโดยใช้ hooks |
| 25 | ตะขอที่กำหนดเอง |
| 26 | บริบท |
| 27 | ผู้อ้างอิง |
| 28 | โครงการ |
| 29 | สำรวจ |
| 30 | บทสรุป |
- การเข้ารหัสมีความสุข ???
ขอแสดงความยินดี กับการตัดสินใจเข้าร่วมใน 30 วันของความท้าทายการเขียนโปรแกรม React ในความท้าทายนี้คุณจะได้เรียนรู้ทุกสิ่งที่คุณต้องการเพื่อพัฒนาแอปพลิเคชัน React ในตอนท้ายของความท้าทายคุณจะได้รับใบรับรองการเขียนโปรแกรมการเขียนโปรแกรม 30Daysofreact ในกรณีที่คุณต้องการความช่วยเหลือหรือหากคุณต้องการช่วยเหลือผู้อื่นคุณอาจเข้าร่วมกลุ่มโทรเลข
ความท้าทาย 30Sofreact เป็นแนวทางสำหรับทั้งผู้เริ่มต้นและ JavaScript ขั้นสูงและนักพัฒนาตอบสนอง ยินดีต้อนรับสู่การตอบสนอง 30 วัน React เป็นไลบรารี JavaScript ฉันสนุกกับการใช้และการสอนตอบสนองและฉันหวังว่าคุณจะทำเช่นนั้นเช่นกัน ในขั้นตอนนี้ทีละขั้นตอนการท้าทาย React คุณจะได้เรียนรู้ React ซึ่งเป็นหนึ่งในไลบรารี JavaScript ส่วนต่อประสานที่ได้รับความนิยมมากที่สุด React สามารถทำทุกอย่างที่ JavaScript สามารถทำได้ React สามารถใช้ เพื่อเพิ่มการโต้ตอบกับเว็บไซต์เพื่อพัฒนาแอพมือถือแอพพลิเคชั่นเดสก์ท็อปเกม ฉันเชื่อว่าคุณจะได้เรียนรู้ค่อนข้างมากในอีก 30 วันข้างหน้าและทักษะการเขียนโปรแกรมและการแก้ปัญหาของคุณจะดีขึ้นอย่างมาก
ฉันจะใช้ภาษาอังกฤษสนทนาและศัพท์แสงน้อยลงเพื่อเขียนความท้าทายนี้ เนื้อหาจะได้รับการอัปเดตอย่างต่อเนื่อง หากคุณพบข้อผิดพลาดผิดพลาดหรือไวยากรณ์ไม่แปลกใจเพราะฉันไม่ได้อ่านหลักฐานใด ๆ ก่อนที่ฉันจะเผยแพร่ ฉันขอแนะนำให้คุณมุ่งเน้นไปที่ข้อความหลักของความท้าทายแทนภาษาอังกฤษและความผิดพลาดเล็กน้อย ฉันซาบซึ้งจริงๆถ้าคุณส่งคำขอดึงมาให้ฉันเพื่อปรับปรุงและอย่าลืมดึงมาก่อนจากอาจารย์ก่อนที่คุณจะส่งคำขอดึง ภาพส่วนใหญ่ที่ฉันใช้ในความท้าทายนี้มาจากความท้าทาย 30DaysofJavaVascript ดังนั้นคุณอาจต้องเปลี่ยนชื่อชื่อไฟล์และโฟลเดอร์ 30Daysofreact หากคุณเก่งในอาร์เรย์ลูปฟังก์ชั่นวัตถุการเขียนโปรแกรมการทำงานการทำลายและการแพร่กระจายและชั้นเรียนคุณจะสามารถติดตามความท้าทายได้อย่างถูกต้อง มิฉะนั้นฉันขอแนะนำให้คุณตรวจสอบ 30daysofjavascript
ก่อนที่คุณจะดำน้ำในหลักสูตรนี้คุณสามารถตรวจสอบการตรวจสอบของ React 30 วัน
ความท้าทายนี้ง่ายต่อการอ่านเขียนเป็นภาษาอังกฤษสนทนามีส่วนร่วมสร้างแรงบันดาลใจและในเวลาเดียวกันก็มีความต้องการมาก คุณต้องจัดสรรเวลาให้เสร็จสิ้นการท้าทายนี้ หากคุณเป็นผู้เรียนรู้ด้วยภาพคุณอาจได้รับบทเรียนวิดีโอเกี่ยวกับช่อง Washera YouTube สมัครสมาชิกช่องแสดงความคิดเห็นและถามคำถามเกี่ยวกับ YouTube vides และเป็นเชิงรุกผู้เขียนจะสังเกตเห็นคุณในที่สุด
ผู้เขียนชอบที่จะได้ยินความคิดเห็นของคุณเกี่ยวกับความท้าทายแบ่งปันความคิดของคุณเกี่ยวกับความท้าทาย 30daysofjavascript คุณสามารถออกจากข้อความรับรองของคุณในลิงค์นี้
เรียนรู้กับ Asabeneh โดยเข้าร่วม การเข้ารหัส ที่กำลังจะมาถึง
เพื่อให้ตรงกับความท้าทายที่คุณต้องมีต่อไปนี้:
แสดง repo นี้เพื่อสนับสนุนงานนี้และแยก repo เพื่อสร้างสำเนาของคุณเองเพื่อทำงานจาก
คุณควรทำงานโดยตรงจากสำเนาของคุณ
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-Reactเพื่อให้การออกกำลังกายทุกวันเสร็จสิ้นคำแนะนำของฉันคือการสร้างสาขาแยกต่างหากเพื่อบ้านโฟลเดอร์ออกกำลังกายหรือการเปลี่ยนแปลงอื่น ๆ ที่คุณทำ สิ่งนี้จะทำให้สาขาหลักของคุณสะอาดตลอดเวลาซึ่งหมายความว่าเจ้านายของคุณจะคล้ายกับต้นแบบดั้งเดิมเสมอ
git checkout -b exercise-solutions # `-b` creates the branch if it does not existในสาขาใหม่ของคุณคุณสามารถใช้ไฟล์/โฟลเดอร์เพื่อจัดโครงสร้างโซลูชันของคุณในการออกกำลังกายทุกวัน
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileมอบโซลูชั่นของคุณไปยังส้อมของคุณ
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierrepo นี้จะได้รับการปรับปรุงทุกวันตลอดทั้งเดือน เมื่อเนื้อหาของวันใหม่พร้อมใช้งานคุณสามารถอัปเดตสำเนาของคุณด้วยขั้นตอนด้านล่าง
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterโปรดทราบว่าการอัปเดตจะใช้กับสาขาหลักเท่านั้น หากคุณต้องการอัปเดตสาขาอื่น ๆ ให้ทำซ้ำขั้นตอนที่ 6-7 ด้วยชื่อสาขา ดูตัวอย่างด้านล่างสำหรับสาขา
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsฉันเชื่อว่าคุณมีแรงจูงใจและความปรารถนาอย่างแรงกล้าที่จะเป็นนักพัฒนาคอมพิวเตอร์และอินเทอร์เน็ต นอกจาก HTML, CSS และ JS ขั้นพื้นฐาน หากคุณมีสิ่งเหล่านี้คุณก็มีทุกอย่างที่จะเริ่มต้น
คุณอาจไม่จำเป็นต้องใช้ node.js ในตอนนี้ แต่คุณอาจต้องการมันในภายหลัง ติดตั้ง node.js
หลังจากดาวน์โหลดดับเบิลคลิกและติดตั้ง
เราสามารถตรวจสอบได้ว่าติดตั้งโหนดบนเครื่องในเครื่องของเราโดยเปิดเทอร์มินัลอุปกรณ์หรือพรอมต์คำสั่งของเรา
asabeneh $ node -v
v12.14.0เมื่อทำบทช่วยสอนนี้ฉันใช้โหนดเวอร์ชัน 12.14.0 แต่ตอนนี้เป็นเวอร์ชันที่แนะนำของ Node.js สำหรับการดาวน์โหลดคือ 12.17.0
มีเบราว์เซอร์มากมาย อย่างไรก็ตามฉันขอแนะนำ Google Chrome
ติดตั้ง Google Chrome หากคุณยังไม่มี เราสามารถเขียนรหัส JavaScript ขนาดเล็กบนคอนโซลเบราว์เซอร์ แต่เราไม่ได้ใช้คอนโซลเบราว์เซอร์เพื่อพัฒนาแอปพลิเคชัน
คุณสามารถเปิดคอนโซล Google Chrome ได้โดยคลิกสามจุดที่มุมบนขวาของเบราว์เซอร์เลือก เครื่องมือเพิ่มเติม -> เครื่องมือนักพัฒนาซอฟต์แวร์ หรือใช้แป้นพิมพ์ลัด ฉันชอบใช้ทางลัด
ในการเปิดคอนโซลโครเมี่ยมโดยใช้แป้นพิมพ์ลัด เป็นการดีที่จะรู้ว่าทางลัดเช่นกันในฐานะนักพัฒนาจาวาสคริปต์และตอบสนองคุณจะใช้เวลามากในคอนโซลเบราว์เซอร์และอย่าขี้เกียจที่จะเปิดในระหว่างการพัฒนา
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
หลังจากที่คุณเปิดคอนโซล Google Chrome ให้ลองสำรวจปุ่มที่ทำเครื่องหมายไว้ เราจะใช้เวลาส่วนใหญ่บนคอนโซล คอนโซลเป็นสถานที่ที่รหัส JavaScript ของคุณไป เครื่องยนต์ Google Console V8 เปลี่ยนรหัส JavaScript ของคุณเป็นรหัสเครื่อง ให้เราเขียนรหัส JavaScript บนคอนโซล Google Chrome:
เราสามารถเขียนรหัส JavaScript ใด ๆ บนคอนโซล Google หรือคอนโซลเบราว์เซอร์ใด ๆ อย่างไรก็ตามสำหรับความท้าทายนี้เรามุ่งเน้นไปที่ Google Chrome Console เท่านั้น เปิดคอนโซลโดยใช้:
Mac
Command+Option+I
Windows:
Ctl+Shift+Iในการเขียนรหัส JavaScript แรกของเราเราใช้ฟังก์ชัน คอนโซลในตัว () เราผ่านอาร์กิวเมนต์เป็นข้อมูลอินพุตและฟังก์ชั่นจะแสดงเอาต์พุต เราผ่าน 'Hello, World' เป็นข้อมูลอินพุตหรืออาร์กิวเมนต์ในฟังก์ชัน Console.log ()
console . log ( 'Hello, World!' ) ฟังก์ชั่น console.log () สามารถใช้พารามิเตอร์หลายตัวคั่นด้วยเครื่องหมายจุลภาค ไวยากรณ์มีลักษณะดังนี้: console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )อย่างที่คุณเห็นจากรหัสตัวอย่างด้านบน console.log () สามารถใช้หลายอาร์กิวเมนต์ ขอแนะนำให้ใช้งาน console.log () จำนวนมากเพื่อตรวจสอบสิ่งที่เกิดขึ้นในรหัสของคุณ แต่อย่าเก็บการทดสอบ console.log () ทั้งหมดไว้ในรหัสของคุณตลอดไป ทำให้ชีวิตของคุณง่ายขึ้นด้วยการเปิดเบราว์เซอร์คอนโซล
เราเพิ่มความคิดเห็นในรหัสของเรา ความคิดเห็นมีความสำคัญมากในการทำให้รหัสอ่านได้มากขึ้นและทิ้งคำพูดไว้ในรหัสของเรา JavaScript ไม่ได้เรียกใช้ส่วนความคิดเห็นของรหัสของเราใน JavaScript บรรทัดข้อความใด ๆ ที่เริ่มต้นด้วย // ใน JavaScript เป็นความคิดเห็นและสิ่งใดก็ตามที่แนบมาเช่นนี้ / * * / เป็นความคิดเห็น
ตัวอย่าง: ความคิดเห็นบรรทัดเดียว
// นี่เป็นความคิดเห็นแรก
// นี่คือความคิดเห็นที่สอง
// ฉันเป็นความคิดเห็นบรรทัดเดียว
ตัวอย่าง: ความคิดเห็นแบบหลายสาย
/* นี่คือความคิดเห็นแบบหลายสาย
ความคิดเห็นแบบหลายเส้นสามารถใช้หลายบรรทัด
JavaScript เป็นภาษาของเว็บ
-
ภาษาการเขียนโปรแกรมคล้ายกับภาษามนุษย์ ภาษาอังกฤษหรือภาษาอื่น ๆ ใช้คำวลีประโยคประโยคผสมและอื่น ๆ อีกมากมายเพื่อถ่ายทอดข้อความที่มีความหมาย ความหมายภาษาอังกฤษของไวยากรณ์คือ การจัดเรียงคำและวลีเพื่อสร้างประโยคที่มีรูปแบบที่ดีในภาษา คำจำกัดความทางเทคนิคของไวยากรณ์คือ โครงสร้างของคำสั่งในภาษาคอมพิวเตอร์ ภาษาการเขียนโปรแกรมมีไวยากรณ์ JavaScript เป็นภาษาการเขียนโปรแกรมและเหมือนกับภาษาการเขียนโปรแกรมอื่น ๆ ที่มีไวยากรณ์ของตัวเอง หากเราไม่เขียนไวยากรณ์ที่ JavaScript เข้าใจมันจะเพิ่มข้อผิดพลาดประเภทต่างๆ เราจะสำรวจข้อผิดพลาดของ JavaScript ประเภทต่าง ๆ ในภายหลัง สำหรับตอนนี้ให้เราดูข้อผิดพลาดทางไวยากรณ์
ฉันทำผิดพลาดโดยเจตนา เป็นผลให้คอนโซลทำให้เกิดข้อผิดพลาดทางไวยากรณ์ ที่จริงแล้วไวยากรณ์นั้นให้ข้อมูลมาก มันแจ้งว่าประเภทของความผิดพลาดเกิดขึ้น โดยการอ่านแนวทางข้อเสนอแนะข้อผิดพลาดเราสามารถแก้ไขไวยากรณ์และแก้ไขปัญหาได้ กระบวนการระบุและลบข้อผิดพลาดจากโปรแกรมเรียกว่าการดีบัก ให้เราแก้ไขข้อผิดพลาด:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )จนถึงตอนนี้เราเห็นวิธีการแสดงข้อความโดยใช้ console.log () หากเรากำลังพิมพ์ข้อความหรือสตริงโดยใช้ console.log () ข้อความจะต้องอยู่ในเครื่องหมายคำพูดเดียวคำพูดสองเท่าหรือคำพูด backtick ตัวอย่าง:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) ตอนนี้ให้เราฝึกเขียนรหัส JavaScript เพิ่มเติมโดยใช้ console.log () บน Google Chrome Console สำหรับประเภทข้อมูลตัวเลข นอกเหนือจากข้อความแล้วเรายังสามารถทำการคำนวณทางคณิตศาสตร์โดยใช้ JavaScript ให้เราทำการคำนวณอย่างง่ายต่อไปนี้ คอนโซลสามารถใช้อาร์กิวเมนต์โดยตรงโดยไม่ต้องใช้ฟังก์ชัน console.log () อย่างไรก็ตามมันรวมอยู่ในบทนำนี้เพราะความท้าทายส่วนใหญ่จะเกิดขึ้นในโปรแกรมแก้ไขข้อความที่การใช้งานฟังก์ชั่นจะต้องบังคับ คุณสามารถเล่นได้โดยตรงพร้อมกับคำแนะนำบนคอนโซล
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3เราสามารถเขียนรหัสของเราบนคอนโซลเบราว์เซอร์ แต่มันจะไม่ทำสำหรับโครงการที่ใหญ่กว่า ในสภาพแวดล้อมการทำงานจริงนักพัฒนาใช้โปรแกรมแก้ไขรหัสที่แตกต่างกันเพื่อเขียนรหัสของพวกเขา ใน 30 วันนี้ JavaScript Challenge เราจะใช้รหัส Visual Studio
Visual Studio Code เป็นตัวแก้ไขข้อความโอเพนซอร์ซยอดนิยม ฉันขอแนะนำให้ดาวน์โหลด Visual Studio Code แต่ถ้าคุณชอบบรรณาธิการคนอื่น ๆ อย่าลังเลที่จะติดตามสิ่งที่คุณมี
หากคุณติดตั้งรหัส Visual Studio ให้เราเริ่มใช้มัน
เปิดรหัส Visual Studio โดยคลิกสองครั้งที่ไอคอน เมื่อคุณเปิดมันคุณจะได้รับอินเทอร์เฟซประเภทนี้ พยายามโต้ตอบกับไอคอนที่มีป้ายกำกับ
ยินดีด้วย! คุณเสร็จสิ้นการตั้งค่าที่คุณต้องเริ่มต้นด้วย React แต่ก่อนที่เราจะดำดิ่งลงไปใน React มาทำทบทวน JavaScript หากคุณรู้สึกสบายใจกับ JavaScript คุณสามารถข้ามวันที่ 1 JavaScript Refresher ส่วนทบทวน JavaScript นั้นกว้างใหญ่และอาจใช้เวลามากกว่าหนึ่งวัน จากประสบการณ์ของฉันคนมักจะติดอยู่ใน React เพราะความรู้ด้านจาวาสคริปต์ของพวกเขาตื้นมากดังนั้นจึงเติมช่องว่างคุณสมบัติ JavaScript ที่จำเป็นทั้งหมดซึ่งสามารถใช้ใน React ได้จะครอบคลุมในส่วนการทบทวน JavaScript มีแบบฝึกหัดมากมาย แต่คุณไม่จำเป็นต้องแก้ปัญหา คลิกที่นี่หากคุณต้องการข้าม JavaScript และข้ามไปยัง React โดยตรง
- ยินดีด้วย ! -
วันที่ 1 >>
