BLOG APP ب REACT JS تحديث المحتوى الجزء الثاني
نظرة سريعة بالفيديو
1- إضافة الملف الخاص بتسجيل الدخول
//
import React from 'react';
import Form from '../../components/Widgets/Form';
import './auth.css';
const Login = (props) =>{
return(
<Form history= {props.history} type="login"/>
);
};
export default Login;
2- إضافة الملف الخاص بالتسجيل
//
import React from 'react';
import Form from '../../components/Widgets/Form';
const Register = (props) =>{
return(
<Form history= {props.history} type="register"/>
);
};
export default Register;
3- إضافة style css للفورم
//
form{
width : 80%;
margin: 0 auto;
}
.form_elements h3{
text-align: center;
font-weight: 300;
font-size: 35px;
}
.form_elements input{
width: 100%;
box-sizing: border-box;
margin: 10px 0;
padding: 10px;
}
.form_elements button{
background-color: lightblue;
padding: 10px;
margin : 10px 0;
color: white;
font-size: 20px;
letter-spacing: 3px;
border-radius: 5px;
}
.disabled{
pointer-events: none;
}
4- إضافة les routes ديال التسجيل وتسجيل الدخول
//
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';
import Login from './components/Auth/login';
import Register from './components/Auth/register';
import Logout from './components/Auth/logout';
const Routes = (props) => {
return(
<Layout {...props}>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/articles" exact component={Articles}/>
<Route path="/articles/:id" exact component={Article}/>
<Route path="/login" exact component={Login}/>
<Route path="/register" exact component={Register}/>
<Route path="/logout" exact component={Logout}/>
</Switch>
</Layout>
);
}
export default Routes;