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;
                            

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

دائما فنفس dossier Posts زيد ل component ArticleCard.js لي كيستقبل ل article ول comments من article.js فعندي ل fonction showData لي كتعرض المعلومات الخاصة بل article ول fonction showArticleComments لي كتعرض التعليقات الخاصة به.

منبعد ف return فقط كنفذ هاد les fonctions فالكود لي زدنا هو :

                                //
import React from 'react';
import './postCard.css';

const ArticleCard = ({article,comments}) =>{
    const showData = () => {
        let template = <div className="post_item">
                <h4>{article.title}</h4>
                <p>{article.body}</p>
            </div>;
        return template;
    }
    const showArticleComments = () => {
        let template = comments.map((comment)=>{
            return <div className="post_item">
                        <div className="user_info">
                            <h4>{comment.name}</h4> 
                            <h4>{comment.email}</h4>
                        </div>
                        <p>{comment.body}</p>
                    </div>;
        });
        return template;
    }
    return(
        <div>
            {showData()}
            <div className="comments">
                <h3>Commentaires</h3>
                {showArticleComments()}
            </div>
        </div>
    );
};


export default ArticleCard;
                            


بحث في الموقع


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