BLOG APP ب REACT JS الجزء الثاني


فهاد الجزء الثاني من blog app ب react js غادي نزيدو ل header ول footer ل application ديالنا ولي فيه غادي يكون logo ول hamburger bars لي ملي نضغط عليها غادي تعرض ل menu لي غادي نزيدوها فالجزء القادم.

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

1- إضافة ل header.js

ف dossier components غادي نزيد dossier نسميه includes فيه غادي نزيد fichier header.js لي هو ل component ديالنا ولي كنسترجع فيه ل component SideNavBar لي غادي يكون هو لقائمة الجانبية ولملف لي فيه css ولي غادي نزيدوهم من بعد.


من بعد عندي ل fonction logo لي فقط كتعرض logo لي عبارة عن texte من بعد عندي ل fonction navbar لي كنعرض بها ل icon hamburger  لي استعملنا ل fontawesome باش نعرضوها.

ف onClick يعني فاش نضغط على ل icon غادي تنفذ ل fonction onOpenNav لي جاتني من ل component Layout ولي كتمكن من فتح لقائمة الجانبية.

من بعد كنفذ les fonctions لي زدنا وكنعرض ل component SideNavBar لي كنرسلو ل props لي فيهم les fonctions لي جاوني من header.js ولي غادي تحتاجهم القائمة الجانبية.


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

                                //
import React from 'react';
import SideNavBar from './SideNav/sideNav';
import './header.css';

const Header = (props) => {
    const logo = () => {
        return(
            <div className="logo">
                <h3>React Blog</h3>
            </div>
        );
    }
    const navbar = () => {
        return(
            <div onClick={props.onOpenNav}>
                <i className="fas fa-bars fa-2x" style={{
                    padding : '8px',
                    color : '#fff'
                }}></i>
            </div>
        );
    }
    return(
        <header className="header">
            <div>
                <SideNavBar {...props}/>
                <div className="header-items">
                    {navbar()}
                    {logo()}
                </div>
            </div>
        </header>
    );
}

export default Header;
                            

2- إضافة style css ل header.js

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

                                //
.header{
    background: rgba(0,0,0,0.7);
    height: 50px;
}
.header-items{
    display: flex;
}
.logo{
    flex-grow: 1;
    padding: 12px;
}
.logo h3{
    color: #fff;
    margin:0;
}
                            

3- إضافة ل footer.js

دائما ف dossier includes غادي نزيد fichier سميه footer.js لي هو ل component ديالنا ولي فقط كيعرض ل footer لي ممكن تدير فيه أي حاجة بغيتي.


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

                                //

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

const Footer = () => {
    return(
        <div className="footer">
            <p>DCoding ©2018</p>
        </div>
    );
}

export default Footer;
                            

4- إضافة style css ل footer.js

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

                                    //
.header{
    background: rgba(0,0,0,0.7);
    height: 50px;
}
.header-items{
    display: flex;
}
.logo{
    flex-grow: 1;
    padding: 12px;
}
.logo h3{
    color: #fff;
    margin:0;
}
                                

5- إضافة ل fontawesome ل projet ديالنا

فباش نخدم بل icons لي قلنا ونعرض ل hamburger icon فل header خص نزيد ل fontawesome ل projet فغادي تمشي ل dossier public فلملف index.html غادي تزيد هاد السطر فل head :


                                    //
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
                                


بحث في الموقع


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