ข้อมูลเบื้องต้นเกี่ยวกับแอปพลิเคชันเชิงรับ

tl:ดร; เพียงใช้สิ่งนี้ https://learnredux.com/

ทำไมล่ะ?

แอปพลิเคชั่นที่มีปฏิกิริยาโต้ตอบได้กลายเป็นกระแสความนิยมในพื้นที่ส่วนหน้าเมื่อเร็ว ๆ นี้ บริษัทต่างๆ เช่น Google, Facebook และ PayPal ได้นำแนวคิดนี้ไปใช้อย่างแพร่หลาย และได้ผลักดันไปสู่ส่วนหน้าที่ใช้ส่วนประกอบที่มีข้อมูลเข้มข้น

ความสามารถในการนำส่วนประกอบและนำกลับมาใช้ใหม่ได้อย่างง่ายดายจากที่อื่นนั้นเป็นเรื่องธรรมดาในโลกของแบ็กเอนด์ที่เน้นโมดูลมานานหลายทศวรรษ และตอนนี้ต้องขอบคุณเครื่องมืออย่าง Webpack, React, Angular และ Vue ซึ่งก็เป็นจริงสำหรับการพัฒนาส่วนหน้า

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

ฉันจะเริ่มต้นได้อย่างไร?

สิ่งแรกคือต้องแน่ใจว่าคุณเข้าใจภาษาที่แปลกประหลาดที่สุดภาษาใดภาษาหนึ่งที่คุณอาจจะเข้าใจอย่างถ่องแท้

• http://eloquentjavascript.net/3rd_edition/
• https://github.com/getify/You-Dont-Know-JS
• http://shop.oreilly.com/product/9780596517748.do

ฉันใช้กรอบงานอะไร?

การเขียน vanilla javascript นั้นยาก การสร้างแอปพลิเคชันทั้งหมดด้วย javascript นั้นยากยิ่งกว่าอีก ใช้กรอบงานเพื่อช่วยจัดการกับส่วนที่น่าเกลียดของจาวาสคริปต์

• React.js (https://reactjs.org/)
• Vue.js (https://vuejs.org/)
• Angular.js (https://angular.io/)

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

พวกเราที่ DevX ขอแนะนำอย่างยิ่งให้ใช้ React เนื่องจากเป็นหนึ่งในเฟรมเวิร์กที่ใช้กันอย่างแพร่หลายที่สุดในอุตสาหกรรม นอกจากนี้ยังมีส่วนขยายที่ยอดเยี่ยมเช่น React Native, React VR และ Proton ที่ขยาย React นอกเหนือไปจากเว็บ

แล้วฉันจะเรียนรู้ React ได้อย่างไร?

• https://egghead.io/courses/the-beginner-s-guide-to-reactjs
• https://reactjs.org/docs/hello-world.html
• https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2

เราขอแนะนำอย่างยิ่งให้คุณใช้บางอย่างเช่น "สร้างแอป React" เพื่อเริ่มต้นตั้งแต่แรก เนื่องจากการตั้งค่าสำหรับ React อาจเป็นเรื่องที่น่ากังวลในตอนแรก (https://github.com/facebook/create-react-app)

นี่เป็นสิ่งที่ดีและทั้งหมด แต่นี่เป็นพื้นฐาน!

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

โอเค แล้วฉันจะกำหนดเส้นทางได้อย่างไร?

ใช้รีแอคเราเตอร์ (v4 ณ จุดและเวลานี้) มีการประกาศอย่างชัดเจนและค่อนข้างง่ายต่อการรับอย่างรวดเร็ว

• https://reacttraining.com/react-router/
• https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

แต่แล้วข้อมูลล่ะ?

นี่เป็นส่วนที่สำคัญที่สุดของแอปพลิเคชันส่วนหน้า และแน่นอนว่าเป็นส่วนที่ยากที่สุด มีคำศัพท์มากมายที่นี่ เช่น การไหลของข้อมูลแบบทิศทางเดียว, ฟังก์ชั่นล้วนๆ, ฟลักซ์, รีดักซ์ ฯลฯ โดยทั่วไปแล้ว รูปแบบเหล่านี้เป็นรูปแบบสถาปัตยกรรมมากกว่าที่คุณสามารถใช้กับเฟรมเวิร์กใดๆ ที่ระบุไว้ข้างต้นได้ แต่ส่วนใหญ่ถูกสร้างขึ้นโดยคำนึงถึง React สิ่งเหล่านี้อาจดูน่ากลัวมากในช่วงแรก แต่ในความเป็นจริงแล้ว ทั้งหมดนี้ค่อนข้างธรรมดา ต่อไปนี้คือตัวเลือกบางส่วนที่คุณสามารถใช้ได้

Flux, OG จาก facebook

• https://facebook.github.io/flux/

Redux มาตรฐานทองคำ

• https://redux.js.org/
• https://learnredux.com/
• https://egghead.io/courses/getting-started-with-redux
• https://egghead.io/courses/building-react-applications-with-idiomatic-redux

MobX แกะดำ

• https://mobx.js.org/getting-started.html
• https://github.com/mobxjs/mobx
• https://egghead.io/courses/manage-application-state-with-mobx-state-tree

โดยส่วนใหญ่ เราใช้ redux ที่นี่ที่ DevX มันเป็นสิ่งที่บริษัทส่วนใหญ่ใช้ในอุตสาหกรรมและค่อนข้างใช้งานง่ายเมื่อคุณคุ้นเคยแล้ว

ยอดเยี่ยม! ฉันเข้าใจทุกอย่างแล้ว ฉันจะไปจากที่นี่ได้ที่ไหน?

โลกนี้เป็นหอยนางรมของคุณ! ขณะนี้ React มีระบบนิเวศที่กำลังเติบโต ซึ่งคุณสามารถทำสิ่งต่างๆ ได้มากมายไม่รู้จบ

React Native สร้างแอปมือถือด้วยความเร็วเนทิฟ

• https://facebook.github.io/react-native/

ตอบสนอง VR เหมือน Pokemon Go

• https://facebook.github.io/react-vr/

เอล์ม เจ้าพ่อแห่งเรดักซ์

• http://elm-lang.org/

รูปแบบขั้นสูง

• https://egghead.io/courses/advanced-react-component-patterns

การทดสอบใน React

• https://egghead.io/courses/react-testing-cookbook
• https://github.com/airbnb/enzyme

คุณสนใจที่จะสร้างแอปพลิเคชันที่มีความหมายและการเรียนรู้จากบุคคลที่มีความคิดเหมือนกันหรือไม่? DevX อาจใช่สำหรับคุณ เรากำลังมองหานักพัฒนา นักออกแบบ และ PM ทุกไตรมาสเพื่อช่วยคุณพัฒนาทักษะผ่านการสร้างแอปพลิเคชันที่สร้างความแตกต่าง เข้าร่วมรายชื่ออีเมลของเราที่ https://ucladevx.com! หากคุณชอบบทความนี้ก็ปรบมือให้พวกเราด้วย