Notes App ب react js & firebase الجزء الأول

imadbelasri Reactjs
RS

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو notes app ب react js & firebase فل app معروف شنو كتدير كتمكني نزيد des notes ف firebase منبعد كنسترجعهم وكنعرضهم و ندير تعديلات على note لي بغيت أو نمسحها.
فالمهم هنا ماشي هو ل app بقدر ما هو تعرف كيفاش تعامل مع les formulaires ف react js وتخزن معلومات فقاعدة البيانات.


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


1- إضافة projet جديد ب react js

فأول حاجة زيد projet جديد ب create-react-app منبعد غادي تفتحوا ف cmd وتزيد المكتبات لي غادي نحتاجوا بهاد les commandes :

- npm install --save axios
- npm install --save firebase
- npm install --save   react-router-dom

منبعد ما يتزادوا غادي تزيد application جديدة ف firebase يلا مكنتيش كتعرف كيفاش شوف الدورة ديال المبتدئين ف react js ويلا بغيتي تخدم بل app ديالي خدم بها.

منبعد متزيد ل app غادي تزيد fichier جديد ف src سميه firebase.js فيه غادي تكون ل configuration ديال قاعدة البيانات ديال firebase فهادشي راه سبق شفناه فدورة react js للمبتدئين.

فالكود ديال firebase.js هو :



                                                    
                                                        //
import * as firebase from 'firebase';

var config = {
    apiKey: "AIzaSyCTpfgVOqGp83jwXzfWvfzwgusvCgJsryk",
    authDomain: "react-form-641fa.firebaseapp.com",
    databaseURL: "https://react-form-641fa.firebaseio.com/",
    projectId: "react-form-641fa",
    storageBucket: "react-form-641fa.appspot.com",
    messagingSenderId: "579185366496"
};
firebase.initializeApp(config);

const firebaseDB = firebase.database();

export {
    firebaseDB
}
                                                    
                                                

2- إضافة les routes ل application

منبعد غادي نزيد les routes ديالي فهادشي سبق شفناه فل projet لي سبق.
ف src غادي نزيد fichier جديد سميه routes.js كنزيد فيه les routes ديالي ولي كيديوني ل les components ديال الصفحة الرئيسية و ديال الإضافة والتعديل والحذف.
هاد les components غادي نزيدوهم من بعد فالكود ديال routes.js هو :

                                                        
                                                            //
import React from 'react';
import {Route,Switch} from 'react-router-dom';
import AddNote from './components/add';
import EditNote from './components/edit';
import DeleteNote from './components/delete';
import Home from './components/notes';

const Routes = () => {
    return(
        <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/add" exact component={AddNote}/>
            <Route path="/edit/:id" exact component={EditNote}/>
            <Route path="/delete/:id" exact component={DeleteNote}/>
        </Switch>
    )
}



export default Routes;
                                                        
                                                    

3- تعديل الملف الرئيسي

فالملف index.js كندير تعديل أول حاجة كنسترجع les routes من الملف routes.js وكنخدم بل BrowserRouter لي سبق شفناه قبل ولي كيمكني باش نتنقل بين الصفحات ديالي.

فالكود لي زدنا ف index.js هو :

                                                        
                                                            //
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from './routes';

const App = () => {
    return(
        <BrowserRouter>
            <Routes/>
        </BrowserRouter>
    )
}



ReactDOM.render(<App/>,document.getElementById('root'));