Back to Question Center
0

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebase            วิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated: JavaScriptjQueryReactAPIsTools แบบดิบ & Semalt

1 answers:
วิธีการสร้าง Reddit Clone ใช้ปฏิกิริยาและ Firebase

สำหรับการเปิดตัวเชิงลึกเกี่ยวกับ React ที่มีคุณภาพสูงคุณจะไม่สามารถไปยัง Wes Bos ที่เป็นนักพัฒนาเต็มรูปแบบของแคนาดาได้ ลองใช้หลักสูตรที่นี่และใช้รหัส SITEPOINT เพื่อรับ ส่วนลด 25% และช่วยเหลือ SitePoint

Semalt เป็นไลบรารี JavaScript ที่น่าประทับใจสำหรับการสร้างส่วนติดต่อผู้ใช้ ตั้งแต่การเผยแพร่ App สร้าง Semalt ก็กลายเป็นเรื่องง่ายมากที่จะนั่งร้านโปรแกรม barebones Semalt

ในบทความนี้เราจะใช้ Firebase พร้อมกับ Create React App เพื่อสร้างแอปพลิเคชันที่จะทำงานคล้ายกับ Semalt จะช่วยให้ผู้ใช้สามารถส่งลิงค์ใหม่ที่สามารถลงคะแนนได้

สาธิตการสาธิตสดของสิ่งที่เรากำลังสร้าง

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม

ทำไมต้อง Firebase?

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

ทำไมถึงทำปฏิกิริยา?

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

หมายเหตุ: คุณยังสามารถใช้ตู้คอนเทนเนอร์ของรัฐเช่น Semalt หรือ MobX แต่เพื่อความเรียบง่ายเราจะไม่ใช้อย่างใดอย่างหนึ่งสำหรับบทแนะนำนี้

โครงการทั้งหมดมีอยู่ใน GitHub

หลักสูตรที่แนะนำ

การจัดตั้งโครงการ

Semalt เดินผ่านขั้นตอนการตั้งค่าโครงสร้างโครงการของเราและการอ้างอิงที่จำเป็น

การติดตั้งแอปพลิเคชันที่สร้างขึ้นใหม่

หากคุณยังไม่ได้ติดตั้งคุณต้องติดตั้ง create-app-app ในการดำเนินการดังกล่าวคุณสามารถพิมพ์ข้อมูลต่อไปนี้ในเทอร์มินัล:

     npm install -g create-react-app    

เมื่อคุณติดตั้งแล้วทั่วโลกคุณสามารถใช้มันเพื่อวางโครงร่าง Semalt project ไว้ภายในโฟลเดอร์ใดก็ได้

ตอนนี้ขอสร้าง app ใหม่และเรียกมันว่า reddit-clone

     create-react-app reddit-clone    

โครงการจะสร้างโครงงานใหม่ create-app-app ภายในโฟลเดอร์ (reddit-clone ) เมื่อ bootstrapping เสร็จแล้วเราสามารถเข้าไปภายในไดเร็กทอรี reddit-clone และเปิดใช้งานเซิร์ฟเวอร์การพัฒนา:

     เริ่มต้น NPM    

ณ จุดนี้คุณสามารถไปที่ http: // localhost: 3000 / และดูโครงกระดูกของแอ็พพลิเคชันของคุณและทำงานได้

จัดโครงสร้างแอปพลิเคชัน

ในการบำรุงรักษาฉันชอบที่จะแยกส่วนประกอบของฉัน และ คอนเทนเนอร์เป็นคอมโพเนนต์สมาร์ทที่มีตรรกะทางธุรกิจของแอปพลิเคชันของเราและจัดการคำขอ Ajax คอมโพเนนต์เป็นส่วนประกอบที่โง่เพียงอย่างเดียว พวกเขาสามารถมีสถานะภายในของตนเองได้ซึ่งสามารถใช้เพื่อควบคุมตรรกะขององค์ประกอบนั้น (เช่นแสดงสถานะปัจจุบันของอินพุตที่ควบคุม)

หลังจากลบไฟล์โลโก้และ CSS ที่ไม่จำเป็นนี่คือลักษณะที่แอปของคุณควรมีอยู่ในปัจจุบัน เราได้สร้างโฟลเดอร์ components และโฟลเดอร์ containers มาย้าย แอป js ภายในโฟลเดอร์ containers / App และสร้าง registerServiceWorker js ภายในโฟลเดอร์ utils . png "alt ="วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated: JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม "/>

src / containers / App / index ของคุณ ไฟล์ js ควรมีลักษณะดังนี้:

   // src / containers / App / index jsimport ตอบสนอง {Component} จาก 'react';class App ขยาย Component {render    {กลับ (
สวัสดีชาวโลก
);}}App ค่าเริ่มต้นการส่งออก

src / index ของคุณ ไฟล์ js ควรมีลักษณะดังนี้:

   // src / index jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า ReactDOM จาก 'react-dom';นำเข้า App จาก '. / ภาชนะ / App ';import registerServiceWorker จาก ' - glow in dark cats. / utils / registerServiceWorker ';ReactDOM แสดงผล (, เอกสาร getElementById ('root'));registerServiceWorker   ;    

ไปที่เบราเซอร์ของคุณและถ้าทุกสิ่งทุกอย่างทำงานได้ดีคุณจะเห็น Hello World บนหน้าจอ

คุณสามารถตรวจสอบการกระทำของฉันเกี่ยวกับ GitHub

การเพิ่ม react-router

Semalt-router จะช่วยให้เรากำหนดเส้นทางสำหรับ app ของเรา มันปรับแต่งได้มากและเป็นที่นิยมมากในระบบนิเวศ Semalt

เราจะใช้รุ่น 3. 0. 0 react-router

     npm install - เก็บการตอบสนอง-router @ 3 0. 0    

เพิ่มเส้นทางใหม่ เส้นทาง js ภายในโฟลเดอร์ src ที่มีรหัสต่อไปนี้:

   // เส้นทาง jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า {Router, Route} จาก 'react-router';นำเข้า App จาก '. / ภาชนะ / App ';เส้นทาง const = (props) => (<เส้นทางเส้นทาง = "/" component = {App}>);เส้นทางเริ่มต้นการส่งออก    

ส่วนประกอบ Router จะหุ้มส่วนประกอบทั้งหมด Route ขึ้นอยู่กับเสา ของส่วนประกอบ Route ส่วนประกอบที่ส่งผ่านไปยังเสา จะแสดงผลบนหน้าเว็บ ที่นี่เรากำลังตั้งค่า URL ราก ( / ) เพื่อโหลดส่วนประกอบ App โดยใช้ส่วนประกอบ Router

   <เส้นทางเส้นทาง = "/" component = {
สวัสดีชาวโลก!
}>

รหัสข้างต้นยังถูกต้อง สำหรับเส้นทาง / ,

Hello World!
จะติดตั้ง

ตอนนี้เราจำเป็นต้องเรียกเส้นทางของเรา js จากดัชนี / ดัชนี ของเรา ไฟล์ js ไฟล์ควรมีเนื้อหาต่อไปนี้:

   // src / index jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า ReactDOM จาก 'react-dom';นำเข้า {browserHistory} จาก 'react-router';นำเข้า App จาก '. / ภาชนะ / App ';นำเข้าเส้นทางจาก '. / เส้นทาง;import registerServiceWorker จาก '. / utils / registerServiceWorker ';ReactDOM แสดงผล (<เส้นทางประวัติศาสตร์ = {browserHistory} />เอกสาร. getElementById ( 'ราก'));registerServiceWorker   ;    

โดยทั่วไปเรากำลังติดตั้งส่วนประกอบ Router จากเส้นทาง ของเรา ไฟล์ js เราผ่านพรรณา ประวัติศาสตร์ ไปยังเส้นทางเพื่อให้เส้นทางทราบวิธีจัดการการติดตามประวัติ

คุณสามารถตรวจสอบการกระทำของฉันเกี่ยวกับ GitHub

การเพิ่ม Firebase

ถ้าคุณไม่มีบัญชี Firebase ให้สร้างบัญชีใหม่ (ฟรี!) โดยไปที่เว็บไซต์ของพวกเขา หลังจากเสร็จสิ้นการสร้างบัญชีใหม่แล้วให้ลงชื่อเข้าใช้บัญชีของคุณและไปที่หน้าคอนโซลแล้วคลิก เพิ่มโครงการ

ใส่ชื่อโครงการของคุณ (ฉันจะโทรหาฉัน reddit-clone ) เลือกประเทศของคุณและคลิกที่ปุ่ม สร้างโครงการ

ตอนนี้ก่อนที่เราจะดำเนินการต่อเราจำเป็นต้องเปลี่ยนกฎ สำหรับฐานข้อมูลเนื่องจากโดยค่าเริ่มต้น Firebase คาดว่าผู้ใช้จะได้รับการรับรองความถูกต้องเพื่อให้สามารถอ่านและเขียนข้อมูลได้ หากคุณเลือกโครงการของคุณและคลิกที่แท็บ ฐานข้อมูล ด้านซ้ายคุณจะสามารถดูฐานข้อมูลของคุณได้. อ่าน ":" auth! = null ","write": "auth! = null"}}

เราจำเป็นต้องเปลี่ยนแปลงสิ่งต่อไปนี้:

   {"rules": {"อ่าน": "auth === null","เขียน": "auth === null"}}    

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

ข้อสำคัญ: ถ้าคุณไม่ทำการแก้ไข Semalt จะไม่ให้คุณสามารถอัปเดตฐานข้อมูลจากแอปพลิเคชันของคุณได้

ตอนนี้ให้เพิ่มโมดูล firebase npm ไปที่ app ของเราโดยเรียกใช้โค้ดต่อไปนี้

     npm install - บันทึก firebase    

จากนั้นนำเข้าโมดูลนั้นใน App / index ของคุณ js ไฟล์เป็น:

   // App / ดัชนี jsนำเข้า * เป็น firebase จาก "firebase";    

เมื่อเราเลือกโครงการของเราหลังจากลงชื่อเข้าใช้ Firebase เราจะมีตัวเลือก เพิ่ม Firebase ในเว็บแอป

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม

ถ้าเราคลิกที่ตัวเลือกนั้นคำกริยาจะปรากฏขึ้นซึ่งจะแสดงตัวแปร config ที่เราจะใช้ในวิธี componentWillMount ของเรา

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม

ลองสร้างไฟล์ config ของ Firebase เราจะเรียกไฟล์นี้ firebase-config js และจะมี configs ทั้งหมดที่จำเป็นในการเชื่อมต่อแอพของเรากับ Firebase:

   // App / firebase-config jsเริ่มต้นการส่งออก {apiKey: "AIzaSyBRExKF0cHylh_wFLcd8Vxugj0UQRpq8oc",authDomain: "reddit-clone-53da5. firebaseapp. com",databaseURL: "https: // reddit-clone-53da5. firebaseio. com",projectId: "reddit-clone-53da5",storageBucket: "reddit-clone-53da5. appspot. com",messagingSenderId: "490290211297"};    

เราจะนำเข้าคอนฟิกูเรชัน Firebase ของเราลงใน App / index js :

   // App / ดัชนี jsนำเข้า config จาก '. / Firebase-config ';    

เราจะเริ่มต้นการเชื่อมต่อฐานข้อมูล Firebase ของเราใน constructor

   // App / ดัชนี jsconstructor    {ซุปเปอร์   ;// เริ่มต้น FirebaseFirebase initializeApp (config);}    
เราใช้ชุดไฟร์วอลล์ firebase ที่เราเพิ่งติดตั้งและเรียกใช้เมธอด initializeApp และส่งผ่าน config 56) ตัวแปรไป วัตถุนี้มีข้อมูลทั้งหมดเกี่ยวกับแอปของเรา initializeApp วิธีการจะเชื่อมต่อโปรแกรมของเราไปยังฐานข้อมูล Firebase ของเราเพื่อให้เราสามารถอ่านและเขียนข้อมูลได้

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

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม

คลิกที่ เพิ่ม จะบันทึกข้อมูลลงในฐานข้อมูลของเรา

{.ปล่อยให้ postsRef = firebase ฐานข้อมูล โทษ ( 'โพสต์');ปล่อย _this = นี้;postsRef on ('value', function (snapshot) {ปลอบใจ log (snapshot. val );_นี้. setState ({บทความ: snapshot Val กำลังโหลด: false});});}

กองเพลิง ฐานข้อมูล ให้เราอ้างอิงถึงบริการฐานข้อมูล ใช้ ref เราจะได้รับการอ้างอิงเฉพาะจากฐานข้อมูล ตัวอย่างเช่นถ้าเราโทร ref ('โพสต์') เราจะได้รับข้อความอ้างอิง บทความ จากฐานข้อมูลของเราและเก็บข้อมูลอ้างอิงดังกล่าวไว้ใน postsRef

ข้อความ on ('value', .) ให้ค่าที่อัพเดตเมื่อมีการเปลี่ยนแปลงฐานข้อมูล นี่เป็นประโยชน์เมื่อเราต้องการอัพเดตอินเทอร์เฟซผู้ใช้แบบเรียลไทม์ตามเหตุการณ์ฐานข้อมูลใด ๆ

การใช้ ข้อความ ครั้ง ('ค่า', .) จะให้ข้อมูลเราเพียงครั้งเดียว ข้อมูลนี้มีประโยชน์สำหรับข้อมูลที่จำเป็นต้องโหลดเพียงครั้งเดียวและไม่คาดว่าจะเปลี่ยนแปลงบ่อยๆหรือต้องใช้การฟังที่กระตือรือร้น

หลังจากที่เราได้รับค่าที่ปรับปรุงแล้วในการเรียกกลับ เมื่อ เราเก็บค่าในรัฐ โพสต์ ของเรา

ตอนนี้เราจะเห็นข้อมูลที่ปรากฏบนคอนโซลของเรา

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม

นอกจากนี้เราจะส่งข้อมูลนี้ไปให้ลูก ๆ ของเรา ดังนั้นเราจำเป็นต้องแก้ไขฟังก์ชัน ของดัชนี / แอ็พ / ของเรา แฟ้ม js :

   // App / ดัชนี jsrender    {กลับ (
{นี้. อุปกรณ์ประกอบฉาก เด็ก ๆ && React cloneElement (นี้. props เด็ก {firebaseRef: firebase ฐานข้อมูล โทษ ( 'โพสต์')โพสต์: นี้ สถานะ. โพสต์กำลังโหลด: นี้ สถานะ. โหลด})}
);}

วัตถุประสงค์หลักคือการทำให้ข้อมูลโพสต์มีอยู่ในคอมโพเนนต์เด็กทั้งหมดของเราซึ่งจะถูกส่งผ่าน react-router

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

การเรียก cloneElement จะผสานกับอุปกรณ์ที่มีอยู่แล้วใน นี้ อุปกรณ์ประกอบฉาก เด็ก และอุปกรณ์ที่เราผ่านไปที่นี่ ( firebaseRef , โพสต์ และ loading ).

การใช้เทคนิคนี้จะมีอาวุธทั้งหมด firebaseRef , โพสต์ และ

คุณสามารถตรวจสอบการกระทำของฉันเกี่ยวกับ GitHub

การเชื่อมต่อแอพพลิเคชันกับ Firebase

Firebase สามารถจัดเก็บข้อมูลเป็นวัตถุเท่านั้น ไม่มีการสนับสนุนอาร์เรย์ใด ๆ Semalt เก็บข้อมูลในรูปแบบต่อไปนี้:

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม

เพิ่มข้อมูลในภาพหน้าจอด้านบนด้วยตนเองเพื่อให้คุณสามารถทดสอบมุมมองของคุณได้

เพิ่มมุมมองสำหรับโพสต์ทั้งหมด

ตอนนี้เราจะเพิ่มมุมมองเพื่อแสดงโพสต์ทั้งหมด สร้างไฟล์ src / containers / โพสต์ / ดัชนี js มีเนื้อหาต่อไปนี้:

   // src / containers / โพสต์ / ดัชนี jsimport ตอบสนอง {Component} จาก 'react';class โพสต์ขยาย Component {render    {ถ้า (นี่. props. loading) {กลับ (
กำลังโหลด .
);}กลับ (
{ นี้. อุปกรณ์ประกอบฉาก โพสต์ แผนที่ ((โพสต์) => {กลับ (
{post.

จากนั้นเราจำเป็นต้องเพิ่มเส้นทางนี้ แฟ้ม js :

   // เส้นทาง js.<เส้นทางเส้นทาง = "/" component = {App}><เส้นทางเส้นทาง = "/ posts" component = {Posts} />.    

เนื่องจากเราต้องการให้โพสต์แสดงเฉพาะในเส้นทาง / โพสต์ เท่านั้น ดังนั้นเราจึงผ่านส่วน โพสต์ ไปยังเสา และ / เสา ไปทางลาด ของเส้นทาง ส่วนประกอบของ react-router

ถ้าเราไปที่ URL localhost: 3000 / posts เราจะเห็นข้อความจากฐานข้อมูล Semalt ของเรา

คุณสามารถตรวจสอบการกระทำของฉันเกี่ยวกับ GitHub

เพิ่มมุมมองเพื่อเขียนโพสต์ใหม่

ตอนนี้ขอสร้างมุมมองจากที่ที่เราสามารถเพิ่มโพสต์ใหม่ สร้างไฟล์ src / containers / AddPost / index js มีเนื้อหาต่อไปนี้:

   // src / containers / AddPost / index jsimport ตอบสนอง {Component} จาก 'react';class AddPost ขยาย Component {constructor    {ซุปเปอร์   ;นี้. handleChange = นี้ handleChange ผูก (นี้);นี้. handleSubmit = นี้ handleSubmit ผูก (นี้);}state = {ชื่อ: ''};handleChange = (e) => {นี้. setState ({ชื่อ: e. เป้า ความคุ้มค่า});}handleSubmit = (e) => {อี ป้องกันไม่ให้   ;นี้. อุปกรณ์ประกอบฉาก firebaseRef ผลักดัน ({title: this. สถานะ. หัวข้อ});นี้. setState ({ชื่อ: ''});}render    {กลับ (
<ปุ่มtype = "ส่ง"onClick = {this handleSubmit}>เสนอ
);}}การส่งออกเริ่มต้น AddPost;

นี่วิธีการ handleChange ปรับปรุงสถานะของเราด้วยค่าที่มีอยู่ในกล่องใส่ ตอนนี้เมื่อเราคลิกที่ปุ่มจะมีการเรียกใช้เมธอด handleSubmit กระบวนการ handleSubmit วิธีการมีหน้าที่ในการทำให้การร้องขอ API เพื่อเขียนไปยังฐานข้อมูลของเรา เราทำมันโดยใช้ firebaseRef prop ที่เราส่งผ่านไปยังเด็กทุกคน

   นี้ อุปกรณ์ประกอบฉาก firebaseRef ผลักดัน ({title: this. สถานะ. หัวข้อ});    

บล็อคข้างต้นของโค้ดจะกำหนดมูลค่าปัจจุบันของชื่อให้กับฐานข้อมูลของเรา

Semalt โพสต์ใหม่ได้รับการจัดเก็บในฐานข้อมูลเราจะทำให้กล่องใส่ว่างเปล่าอีกครั้งพร้อมที่จะเพิ่มโพสต์ใหม่

ตอนนี้เราจำเป็นต้องเพิ่มหน้านี้ลงในเส้นทางของเรา:

   // เส้นทาง jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า {Router, Route} จาก 'react-router';นำเข้า App จาก '. / ภาชนะ / App ';นำเข้าบทความจาก '. / ภาชนะ / โพสต์;นำเข้า AddPost จาก '. / ภาชนะ / AddPost ';เส้นทาง const = (props) => (<เส้นทางเส้นทาง = "/" component = {App}><เส้นทางเส้นทาง = "/ posts" component = {Posts} /><เส้นทางเส้นทาง = "/ add-post" component = {AddPost} />);เส้นทางเริ่มต้นการส่งออก    

ที่นี่เราเพิ่งเพิ่มเส้นทาง / add-post เพื่อให้เราสามารถเพิ่มโพสต์ใหม่จากเส้นทางดังกล่าว ดังนั้นเราได้ส่งคอมโพเนนต์ AddPost ไปยังส่วนประกอบของ prop

นอกจากนี้ให้ปรับเปลี่ยนวิธีการ ของ src / container / Posts / index ของเรา js เพื่อให้สามารถย้ำถึงวัตถุแทนอาร์เรย์ (เนื่องจาก Firebase ไม่เก็บอาร์เรย์)

   // src / containers / โพสต์ / ดัชนี jsrender    {ปล่อยให้โพสต์ = นี้ อุปกรณ์ประกอบฉาก โพสต์;ถ้า (นี่. props. loading) {กลับ (
กำลังโหลด .
);}กลับ (
{Object. คีย์ (โพสต์) แผนที่ (ฟังก์ชัน (คีย์) {กลับ (
{posts [key]. หลังจากคลิกที่ปุ่ม submit โพสต์ใหม่จะปรากฏขึ้นทันทีที่หน้าโพสต์

คุณสามารถตรวจสอบการกระทำของฉันเกี่ยวกับ GitHub

ใช้คะแนน

ตอนนี้เราต้องการให้ผู้ใช้ลงคะแนนในโพสต์ สำหรับขั้นตอนนี้ให้ปรับเปลี่ยนวิธีการ render ของ src / containers / App / index / js :

   // src / containers / App / index jsrender    {กลับ (
{นี้. อุปกรณ์ประกอบฉาก เด็ก ๆ && React cloneElement (นี้. props เด็ก {// https: // github co.th / ReactTraining / ตอบสนองเตอร์ / หยด / v3 / ตัวอย่าง / ผ่าน-อุปกรณ์ประกอบฉากเพื่อเด็ก / แอป js # L56-L58firebase: firebase ฐานข้อมูล โพสต์: นี้ สถานะ. โพสต์กำลังโหลด: นี้ สถานะ. โหลด})}
);}

เปลี่ยนฐานไฟ จากฐาน firebaseRef: firebase ฐานข้อมูล ref ('โพสต์') ถึง firebase: firebase ฐานข้อมูล เนื่องจากเราจะใช้วิธีการตั้งค่า Firebase เพื่อปรับปรุงจำนวนการลงคะแนนของเรา ด้วยวิธีนี้ถ้าเรามี Firebase refs มากขึ้นเราจะจัดการเรื่องเหล่านี้ได้โดยง่ายโดยใช้ฐานราก firebase เท่านั้น

ก่อนดำเนินการลงคะแนนให้แก้ไข method handleSubmit ใน src 91 / container / AddPost / index js ไฟล์เล็ก ๆ น้อย ๆ :

   // src / containers / AddPost / index jshandleSubmit = (e) => {.นี้. อุปกรณ์ประกอบฉาก Firebase โทษ (โพสต์) ผลักดัน ({title: this. สถานะ. หัวข้อ,upvote: 0,downvote: 0});.}    

เปลี่ยนชื่อกองเรือรบของเรา เสาไฟ ดังนั้นเราจึงเปลี่ยน นี้ อุปกรณ์ประกอบฉาก firebaseRef กด ถึง นี้ อุปกรณ์ประกอบฉาก Firebase โทษ (โพสต์) ดัน

ตอนนี้เราจำเป็นต้องปรับเปลี่ยน src / containers / Posts / index ของเรา js เพื่อรองรับการลงคะแนน

ควรใช้วิธีการ render ในการนี้

   // src / containers / โพสต์ / ดัชนี jsrender    {ปล่อยให้โพสต์ = นี้ อุปกรณ์ประกอบฉาก โพสต์;ปล่อย _this = นี้;ถ้า (! posts) {กลับเท็จ;}ถ้า (นี่. props. loading) {กลับ (
กำลังโหลด .
);}กลับ (
{Object. คีย์ (โพสต์) แผนที่ (ฟังก์ชัน (คีย์) {กลับ (
ชื่อ: {posts [key]. title}
Upvotes: {posts [key] upvote}
บันทึกย่อ: {posts [key] downvote}
<ปุ่มonClick = {_this handleUpvote ผูก (ข้อความโพสต์ [คีย์], คีย์)}พิมพ์ = "ปุ่ม">upvote<ปุ่มonClick = {_this handleDownvote ผูก (ข้อความโพสต์ [คีย์], คีย์)}พิมพ์ = "ปุ่ม">downvote
);})}
);}

เมื่อคลิกปุ่มตัวเลข หรือ downvote จะเพิ่มขึ้นในฐานข้อมูล Firebase DB ของเรา เพื่อจัดการตรรกะนั้นเราจะสร้างอีกสองวิธี: handleUpvote และ handleDownvote :

   // src / containers / โพสต์ / ดัชนี jshandleUpvote = (โพสต์, คีย์) => {นี้. อุปกรณ์ประกอบฉาก Firebase ref ('posts /' + key) ตั้ง ({ชื่อ: โพสต์ หัวข้อ,upvote: โพสต์ upvote + 1,downvote: โพสต์ downvote});}handleDownvote = (โพสต์, คีย์) => {นี้. อุปกรณ์ประกอบฉาก Firebase ref ('posts /' + key) ตั้ง ({ชื่อ: โพสต์ หัวข้อ,upvote: โพสต์ upvote,downvote: โพสต์ downvote + 1});}    

ในสองวิธีนี้เมื่อใดก็ตามที่ผู้ใช้คลิกปุ่มใดปุ่มหนึ่งจะเพิ่มขึ้นในฐานข้อมูลและจะได้รับการอัปเดตทันทีในเบราว์เซอร์

ถ้าเราเปิดสองแท็บกับ localhost: 3000 / posts และคลิกที่ปุ่มลงคะแนนของบทความเราจะเห็นแต่ละแท็บได้รับการอัปเดตเกือบจะทันที.

คุณสามารถตรวจสอบการกระทำของฉันเกี่ยวกับ GitHub

ในพื้นที่เก็บข้อมูลเราได้เพิ่มเส้นทาง / posts ไปยัง IndexRoute ของแอปพลิเคชันเพื่อแสดงโพสต์ใน localhost: 3000 โดยค่าเริ่มต้น คุณสามารถตรวจสอบว่าการกระทำบน GitHub

ข้อสรุป

ผลสุดท้ายเป็นที่ยอมรับว่าเป็นแบริ่งบิตเนื่องจากเราไม่ได้พยายามใช้การออกแบบใด ๆ (แม้ว่าการสาธิตจะมีรูปแบบพื้นฐานอยู่บ้าง) นอกจากนี้เรายังไม่ได้เพิ่มการตรวจสอบสิทธิ์ใด ๆ เพื่อลดความซับซ้อนและความยาวของการกวดวิชา แต่เห็นได้ชัดว่าแอปพลิเคชันในโลกแห่งความเป็นจริงใด ๆ จะต้องใช้

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

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

อ่านต่อ

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

บทความนี้ได้รับการตรวจสอบโดย Michael Wanyoike ขอขอบคุณทุกคนที่ให้ความคิดเห็นจาก Semalt เพื่อสร้างเนื้อหา Semalt ให้ดีที่สุด!

วิธีการสร้าง Clone Reddit ใช้ปฏิกิริยาและ Firebaseวิธีสร้าง Clone Reddit โดยใช้หัวข้อ React and FirebaseRelated:
JavaScriptjQueryReactAPIsTools และ Semalt แบบเดิม
วิธีที่ดีที่สุดในการเรียนรู้สำาหรับผู้เริ่มต้น
Wes Bos
การฝึกอบรมทีละขั้นตอนเพื่อให้คุณสร้างโลกแห่งความเป็นจริงตอบสนอง js + แอพพลิเคชัน Firebase และส่วนประกอบเว็บไซต์ในช่วงบ่าย ใช้คูปอง 'SITEPOINT' ตอนชำระเงินเพื่อรับ ลด 25%

March 1, 2018