NOTES APP ب REACT JS & FIREBASE الجزء الثاني

imadbelasri Reactjs
RS

فهاد الجزء الثاني من notes app ب react js غادي نكملو ل projet وغادي نزيدوا القائمة ولي غادي تمكنا من التنقل بين الصفحات ديالنا منبعد غادي نزيدو ل formulaire لي غادي تمكن من إضافة note لقاعدة البيانات.


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


1- إضافة القائمة الرئيسية

فغادي تزيد dossier جديد ف src سميه components فيه غادي تزيد  dossier سميه includes فيه زيد fichier سميه navbar.js لي فيه غادي نزيد الروابط لي كيديو للصفحة الرئيسية والفورم لي كتمكن من الإضافة.
فالكود لي زدنا ف navbar.js هو :

                                                    
                                                        //
import React from 'react';
import {Link} from 'react-router-dom';
import './navbar.css';

const Navbar = () => {
    const showNavbar = () =>{
        let template = null;
        template = <div className="header">
            <div className="logo">
                <h3>React Notes App</h3>
            </div>
            <nav>
                <Link to="/">Accueil</Link>
                <Link to="/add">Ajouter une note</Link>
            </nav>
        </div>;
        return template;
    }
    return(
        <div>
            {showNavbar()}
        </div>
    )
}


export default Navbar;
                                                    
                                                

2- إضافة css للقائمة الرئيسية

فباش نزيد css للقائمة لي زدنا غادي نزيد fichier جديد سميه navbar.css فنفس dossier لي هو includes فيه عندي styles css لي غادي نحتاج.
فالكود ديال ل fichier navbar.css هو :
 

                                                        
                                                            //
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.header{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    height: 50px;
}
.logo{
    color: white;
    font-weight: 300;
    font-size: 18px;
    margin-right: 20px;
    padding-left: 10px;
}
nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
nav a{
    color: white;
    font-weight: 300;
    font-size: 18px;
    text-decoration: none;
    margin-right: 20px;
}
                                                        
                                                    

3- إضافة ملف إضافة note

ف components غادي تزيد fichier جديد سميه add.js فيه غادي تكون لفورم لي غادي نزيدوها ف fichier بوحدها من بعد.
فحيت غادي يكونوا عندنا جوج ديال les formulaires فهاد لفورم غادي تاخد واحد type لي به كنحدد واش غادي نزيد ولا ندير تعديل يلا كنت غادي نزيد غادي نعرض الفورم ديال الإضافة كنت غادي نعدل غادي نزيد لفورم ديال التعديل.

الكود ديال add.js هو :

                                                        
                                                            //
import React from 'react';
import Navbar from './includes/navbar';
import Form from './widgets/form';

const AddNote = () => {
    return(
        <div>
            <Navbar/>
            <Form type="add"/>
        </div>
    )
}



export default AddNote;