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

imadbelasri Reactjs
RS

فهاد الجزء الثاني من هاد التحديث غادي نشوفوا كيفاش نزيدو 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;
                                                        
                                                    

دروس ذات صلة

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 ونزيدو الجزء الخاص بالمست...