BLOG APP ب REACT JS تحديث المحتوى الجزء الثاني


فهاد الجزء الثاني من هاد التحديث غادي نشوفوا كيفاش نزيدو Système d'authentification ل projet ديالنا أول حاجة غادي نزيدو الملفات الخاصة بالدخول والتسجيل ومنبعد عاد نزيدو les routes ديالنا.

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

1- إضافة الملف الخاص بتسجيل الدخول

غادي نمشي ل components غادي نزيد dossier جديد سميه Auth فيه زيد ملف سميه login.js فيه غادي نسترجع component لي غادي يكون عبارة عن Form ولي غادي نزيدوه من بعد.

أيضا كنصيفط ل component Form واحد deux variables وحدة سميتها type لي فيها كنحدد لفورم واش ديال ل connexion ولا ديال ل inscription وأيضا وحدة سميتها history لي غادي تمكنا باش نديرو la redirection فاش نتكونيكطاو.

الكود ديال الملف هو :

                                //
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- إضافة الملف الخاص بالتسجيل

دائما ف dossier Auth زيد ملف سميه register.js فيه نفس الكود لي زدنا ف login.js الفرق فقط ف type لي حددناه ف register يعني الفورم ديال ل inscription.

الكود ديال الملف هو :

                                //
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 للفورم

دائما ف dossier Auth زيد ملف سميه auth.css لي فيه غادي يكونوا les styles 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 ديال التسجيل وتسجيل الدخول

غادي نمشي للملف routes.js فيه غادي نزيد les routes ديال ل connexion ول inscription فغادي نسترجع ل components لي زدنا و نزيد les routes.

بالنسبة ل component Logout غادي نزيدوه من بعد.

الكود لي زدنا هو :

                                    //
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;
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


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