Blog App ب react js الجزء الرابع


فهاد الجزء الرابع من Blog ب react js غادي نكملوا ال projet بعرض les articles كاملين فالصفحة الخاصة بهم كما غادي نشوفوا كيفاش نعرضوا article بل id ديالو مع التعليقات الخاصة به.

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


1- إضافة الصفحة الخاصة بجميع المقالات


فباش نعرض les articles كاملين ف dossier components غادي نزيد dossier سميه Posts فيه زيد fichier سميه articles.js
لي غادي نعرض فيه les articles كاملين.

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

الكود لي زدنا ف articles.js هو :

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


class Articles extends Component{
    constructor(props){
        super(props);
        this.state = {
            articles : []
        }
    }
    componentWillMount(){
        this.getArticles();
    }
    getArticles = () =>{
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                this.setState({
                    articles : response.data
                });
            });
    }
    render(){
        return(
            <div>
                <PostCard articles={this.state.articles}/>
            </div>
        )
    }
}   


export default Articles;
                                    
                                

2- إضافة الصفحة الخاصة بعرض مقال


فباش نعرض article بل id ديالو ف dossier Posts زيد fichier سميه article.js
لي غادي نعرض فيه article والتعليقات الخاصة به.

فهنا عندي نفس الكود لي زدت ف articles.js فقط بدلت الرابط ديال ل api لي كياخذ ل id ديال ل post ولي كنسترجعوا بهاد الطريقة :

this.props.match.params.id

وفنفس الوقت كنفذ fonction getArticleComments لي كتمكن من استرجاع التعليقات الخاصة بل article لي كتاخذ ل id ديالو ولي كنزيدهم ف array comments زدتها ف state.

منبعد كنعرض ل component ArticleCard لي فقط كيعرض المعلومات لي استرجعت فكياخد ل article و comments ولي غادي نزيدوه منبعد.

الكود لي زدنا ف article.js هو :

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


class Article extends Component{
    constructor(props){
        super(props);
        this.state = {
            article : [],
            comments : []
        }
    }
    componentWillMount(){
        this.getArticle();
    }
    getArticle = () =>{
        axios.get(`https://jsonplaceholder.typicode.com/posts/${this.props.match.params.id}`)
            .then(response => {
                this.setState({
                    article : response.data
                });
                this.getArticleComments();
            });
    }
    getArticleComments = () =>{
        axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${this.props.match.params.id}`)
            .then(response => {
                this.setState({
                    comments : response.data
                });
            });
    }
    render(){
        return(
            <div>
                <ArticleCard comments={this.state.comments} article={this.state.article}/>
            </div>
        )
    }
}   


export default Article;
                                    
                                

كلمات مفاتيح :