Blog App ب react js الجزء الأول
نظرة سريعة بالفيديو
1- إضافة les routes ديال ل projet ديالنا
//
import React from 'react';
import {Route,Switch} from 'react-router-dom';
import Layout from './components/hoc/Layout/layout';
import Home from './components/Home/home';
import Articles from './components/Posts/articles';
import Article from './components/Posts/article';
const Routes = () => {
return(
<Layout>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/articles" exact component={Articles}/>
<Route path="/articles/:id" exact component={Article}/>
</Switch>
</Layout>
);
}
export default Routes;
2- استخدام ل BROWSERROUTER ف index.js
//
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from './route';
const App = () => {
return(
<BrowserRouter>
<Routes/>
</BrowserRouter>
);
};
ReactDOM.render(<App/>,document.getElementById('root'));
3- إضافة الملف الرئيسي
//
import React, { Component } from 'react';
import Header from '../../Includes/header';
import Footer from '../../Includes/footer';
import './layout.css';
class Layout extends Component{
constructor(props){
super(props);
this.state = {
showNav : false
}
}
toggleSideNav = (action) => {
this.setState({
showNav : action
});
}
render(){
return(
<div>
<Header
showNav={this.state.showNav}
onHideNav={() => this.toggleSideNav(false)}
onOpenNav={() => this.toggleSideNav(true)}
/>
{this.props.children}
<Footer/>
</div>
);
}
}
export default Layout;
4- إضافة style css ل layout.js
//
body{
font-family: 'Times New Roman', Times, serif;
background: #ececec;
margin: 0;
padding: 0;
box-sizing: border-box;
}