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

imadbelasri Reactjs
RS

فهاد الجزء الثاني من 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 &copy;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">
                                                        
                                                    

دروس ذات صلة

RS

Blog App ب react js الجزء الأول

فهاد ل projet الجديد لي غادي يبقى مفتوح على تحديث جديد كل مرة غادي نشوفوا كيفاش نقادو blog ب react j...


RS

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

فهاد الجزء الثاني من blog app ب react js غادي نزيدو ل header ول footer ل application ديالنا ولي فيه...


RS

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

فهاد الجزء الثالت من BLOG APP ب REACT JS غادي نكملو ل projet ديالنا غادي نشوفوا كيفاش نزيدو الق...


RS

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

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


RS

Notes App ب react js & firebase الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو notes app ب react js & firebase فل app معروف شنو كتدير...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الثاني

فهاد الجزء الثاني من notes app ب react js غادي نكملو ل projet وغادي نزيدوا القائمة ولي غادي تمكنا من...


RS

Notes App ب react js & firebase الجزء الثالت

فهاد الجزء الثالت من Notes App ب react js & firebase غادي نكملو ل projet ديالنا غادي نزيدو ل form دي...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الرابع والأخير

فهاد الجزء الرابع والاخير من NOTES APP ب REACT JS & FIREBASE غادي نكملوا ل projet وغادي نزيدو ل...


RS

Twitter app ب laravel & react js الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو Twitter App لي هي application كتمكن من إضافة des tweets...


RS

Twitter app ب laravel & react js الجزء الثاني

فهاد الجزء الثاني من Twitter app ب laravel & react js غادي نكملوا ل projet ونزيدو الجزء الخاص بالمست...