Blog App ب react js تحديث المحتوى الجزء الأول


فهاد ل projet لي هو تحديث ل Blog ب react js لي زدناه من قبل غادي نشوفوا تغييرات لي غادي نزيدوها من بينها تعديل المحتوى لي غادي يولي من firebase عوض ل Api لي كنا خدمنا بها بالإضافة ل login système لي غادي نزيدوه حتى هو ل Blog ديالنا.

نظرة سريعة بالفيديو

1- إضافة الملف الخاص بإعدادت firebase

ف firebase راه سبق وشفنا كيفاش نزيدوها لا فالقناة ولا فل projet لي كان عبارة على notes app من بعد غادي تطيليشارجي لملف لي فيه les articles من هنا ثم غادي تزيد fichier جديد ف src فيه غادي تزيد هاد الكود لي سبق وشفناه قبل :

                                //
import * as firebase from 'firebase';
// Initialize Firebase
const config = {
    apiKey: "AIzaSyBCxNm7167oA1YNaxOSCuWduhOsHobC9gc",
    authDomain: "react-blog-39d83.firebaseapp.com",
    databaseURL: "https://react-blog-39d83.firebaseio.com",
    projectId: "react-blog-39d83",
    storageBucket: "react-blog-39d83.appspot.com",
    messagingSenderId: "15971988141"
  };
firebase.initializeApp(config);


const firebaseDB = firebase.database();
const firebaseArticles = firebaseDB.ref('articles');

export{
    firebase,
    firebaseDB,
    firebaseArticles
}
                            

2- إسترجاع les articles من قاعدة البيانات

غادي نمشي للملف articles.js لي سبق وزدناه من قبل ولي كنسترجع فيه les articles من ل api هنا درنا تغيير عوض من ل api زدنا لكود باش إسترجعنا les articles من firebase.

هادشي درناه فل fonction getArticles الكود بعد التعديل هو :

                                //
import React,{Component} from 'react';
import {firebaseArticles} from '../../firebase';
import PostCard from '../Widgets/postCard';


class Articles extends Component{
    constructor(props){
        super(props);
        this.state = {
            articles : []
        }
    }
    componentWillMount(){
        this.getArticles();
    }
    getArticles = () =>{
        firebaseArticles.once('value')
            .then((snapshot) => {
                const articles = [];
                snapshot.forEach((item) =>{
                    articles.push({
                        ...item.val(),
                        id : item.key
                    })
                })
                this.setState({
                    articles
                })
            })
    }
    render(){
        return(
            <div>
                <PostCard articles={this.state.articles}/>
            </div>
        )
    }
}   


export default Articles;
                            

3- إسترجاع article بل id ديالو

منبعد غادي نمشي ل article.js لي هو الملف لي كنسترجع فيه article بل id ديالو فهنا أيضا درنا تغييرفل fonction getArticle  بدلنا لكود من ل api ل firebase.

بالنسبة للتعليقات غادي نخليوهم خاويين في إنتظار منزيدوهم فاجزاء قادمة.

الكود بعد التعديل هو :

                                //
import React,{Component} from 'react';
import ArticleCard from '../Widgets/articleCard';
import {firebaseDB} from '../../firebase';


class Article extends Component{
    constructor(props){
        super(props);
        this.state = {
            article : [],
            comments : []
        }
    }
    componentWillMount(){
        this.getArticle();
    }
    getArticle = () =>{
        firebaseDB.ref(`articles/${this.props.match.params.id}`).once('value')
            .then((snapshot) =>{
                let article = snapshot.val();
                this.setState({
                    article
                });
            })
    }
    getArticleComments = () =>{
       
    }
    render(){
        return(
            <div>
                <ArticleCard comments={this.state.comments} article={this.state.article}/>
            </div>
        )
    }
}   


export default Article;
                            

4- عرض les articles فالصفحة الرئيسية

غادي نمشي للملف home.js لي سبق وزدناه من قبل ولي كنسترجع فيه les articles من ل api هنا درنا تغيير عوض من ل api زدنا لكود باش إسترجعنا les articles من firebase.

هادشي درناه فل fonction getArticles الكود بعد التعديل هو :

                                    //import React,{Component} from 'react';
import {firebaseArticles} from '../../firebase';
import PostCard from '../Widgets/postCard';


class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            articles : []
        }
    }
    componentWillMount(){
        this.getArticles();
    }
    getArticles = () =>{
        firebaseArticles.once('value')
            .then((snapshot) => {
                const articles = [];
                snapshot.forEach((item) =>{
                    articles.push({
                        ...item.val(),
                        id : item.key
                    })
                })
                this.setState({
                    articles
                })
            })
    }
    render(){
        return(
            <div>
                <PostCard articles={this.state.articles}/>
            </div>
        )
    }
}   


export default Home;
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد