BLOG APP ب REACT JS الجزء الثاني
نظرة سريعة بالفيديو
1- إضافة ل 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
//
.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
//
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
//
.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 ديالنا
//
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">