BLOG APP ب REACT JS الجزء الثالت


فهاد الجزء الثالت من BLOG APP ب REACT JS غادي نكملو ل projet ديالنا غادي نشوفوا كيفاش نزيدو القائمة الجانبية لي شفنا فالفيديو من بعد غادي نزيدو الصفحة الرئيسية لي فيها غادي نعرضوا les articles ديالنا كاملين.

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

1- إضافة القائمة الجانبية

فباش نزيد القائمة الجانبية غادي ن installer واحد ل package لي هو react-simple-sidenav فغادي تدير ل commande :

npm install  react-simple-sidenav

منبعد غادي نزيد package خور باش نخدم ب les routes فغادي تدير ل commande :

npm install  react-router-dom

ف dossier includes غادي نزيد dossier سميه SideNav فيه غادي تزيد fichier سميه sideNav.js فيه غادي يكون الكود لي كيمكن من استرجاع Link باش نزيد الروابط و fichier css لي غادي نزيدوه من بعد.

عندي ايضا array ديال les objets سميتها items فيها العناصر ديال ل menu ولي فيهم texte ول icon و الرابط ثم منبعد عندي fonction navbarItems لي كتعرض العناصر ديال ل menu.

منبعد كن retourner SideNav لي كتاخد les méthodes لي جاوني من ل header وفوسطها كنزيد العناصر لي كنعرضهم بل fonction navbarItems.

الكود ديال  sideNav.js هو :

                                //
import React from 'react'
import SideNav from 'react-simple-sidenav';
import {Link} from 'react-router-dom';
import './sideNav.css';


const SideNavBar = (props) => {
    const items = [
        {
            text : 'Home',
            icon : 'fas fa-home',
            link : '/',
        },
        {
            text : 'Articles',
            icon : 'fas fa-list-ul',
            link : '/articles',
        }
    ];
    const navbarItems = () => {
        return items.map((item,i)=>{
            return(
                <div key={i}   className="link">
                   <Link to={item.link}>
                        <i className={item.icon}></i>
                        <span>{item.text}</span>
                   </Link>
                </div>
            );
        }); 
    }
    return(
        <div>
            <SideNav
                showNav={props.showNav}
                onHideNav={props.onHideNav}
                navStyle={{
                    background : '#242424',
                    maxWidth : '250px'
                }}
            >
                {navbarItems()}
            </SideNav>
        </div>
    )
}

export default SideNavBar;
                            

2- إضافة STYLE CSS ل sideNav.JS

دائما ف dossier SideNav غادي نزيد style css لي غادي يكون فل component SideNav 
فغادي نزيد ملف جديد سميه sideNav.css فالكود لي غادي نزيد فيه هو : 

                                //
.link{
    display: flex;
}
.link a{
    font-size: 18px;
    color : #fff !important;
    font-weight: 300;
    padding: 10px;
    text-decoration: none;
}
.link i {
    margin-right: 5px;
}
                            

3- إضافة الصفحة الرئيسية

فغادي نمشي ل component غادي نزيد dossier Home فيه زيد fichier home.js فباش نسترجع les articles من ل api غادي نحتاج axios لي كندير به des requêtes http بحال ajax.

فغادي تدير ل commande :

npm install --save axios 

فل fichier home.js غادي نسترجع axios وعندي ايضا واحد ل component PostCard لي غادي نزيدوه من بعد.

فل constructor كنزيد state لي فيها كنزيد ل array articles لي غادي يتزادو فيها les articles منبعد فاش كتشارجا ل page كتنفذ ل méthode getArticles لي كنسترجع بها les articles من ل api ولي كنزيدهم فل array articles.

من بعد كن retourner ل component PostCard لي غادي ياخذ les articles لي استرجعنا ولي غادي نزيدوه من بعد.

الكود ديال home.js هو :

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


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


export default Home;
                            

4- إضافة ل component PostCard

دائما ف components غادي نزيد dossier Widgets فيه زيد fichier postCard لي غادي يكون هو لي كيعرض les articles.

فعندي fonction showData لي غادي تستقبل les articles لي جاوني من home.js ولي كنخدم بل map باش كنعرضهم.

منبعد ف return كنفذ ل fonction showData فالكود لي ديال الملف هو :

                                    //
import React from 'react';
import './postCard.css';
import {Link} from 'react-router-dom';

const PostCard = (props) =>{
    const showData = () => {
        let template = props.articles.map((article,i)=>{
            return  <div key={i} className="post_item">
                <Link to={`/articles/${article.id}`}>
                    <h4>{article.title}</h4>
                </Link>
                <p>{article.body}</p>
            </div>;
        });
        return template;
    }
    return(
        <div>
            {showData()}
        </div>
    );
};


export default PostCard;
                                

5- إضافة css ل component PostCard

دائما ف dossier Widgets غادي نزيد style css لي غادي يكون فل component PostCard
فغادي نزيد ملف جديد سميه postCard.css فالكود لي غادي نزيد فيه هو : 

                                    //
.post_item{
    background: white;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
}
.post_item a {
    text-decoration: none;
    color: grey;
    cursor: pointer;
}
.comments h4{
    border: 1px solid orange;
    padding: 5px;
}
.comments h3{
    text-align: center;
    background: white;
    padding: 10px;
    border: 1px solid #dddddd;
}
                                


بحث في الموقع


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