Mern stack from scratch الجزء الثالت


فهاد الجزء الثالت من Mern stack from scratch الخاص ب notes app غادي نسترجعوا les notes كاملين ونعرضوهم منبعد غادي نزيدوا les routes ديالنا فل frontend.

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


1- إضافة ل component Notes


دائما ف components غادي تزيد فيه fichier جديد سميه Notes.jsx.


فيه كنسترجع les notes من الرابط


 http://localhost:3200/notes 


لي سبق وزدنا منبعد كنعرضهم ف table مع الروابط ديال التعديل والحذف.


فاش كنضغط على رابط التعديل كيديني ل component EditNote لي زدنا من قبل وفاش كنضغط على زر الحذف كتنفذ fonction سميتها deleteNote لي كتاخذ ل id ديال note وكترسلوا للرابط ديال الحذف لي سبق وزدنا فل backend وكتمسح note.


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

                                    
                                        //
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

export default class Notes extends Component {

    state = {
        notes: []
    }

    componentDidMount() {
        this.getNotes();
    }

    getNotes = () => {
        axios.get('http://localhost:3200/notes')
            .then(res => {
                this.setState({
                    notes: res.data.notes
                });
            }).catch(err => console.log(err));
    }

    deleteNote = id => {
        axios.delete('http://localhost:3200/notes/' + id)
            .then(res => {
                this.setState({
                    notes: this.state.notes.filter(item => item._id !== id)
                });
            }).catch(err => console.log(err));
    }

    render() {
        const { notes } = this.state;
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-10 my-4 mx-auto">
                        <table className="table">
                            <thead>
                                <tr>
                                    <th>Titre</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    notes.length > 0 && notes.map(note => (
                                        <tr key={note._id}>
                                            <td>{note.title}</td>
                                            <td>{note.body}</td>
                                            <td>
                                                <Link
                                                    to={`/edit/note/${note._id}`}
                                                    className="btn btn-sm btn-warning mr-1 text-white"
                                                >Modifier</Link>
                                                <a
                                                    onClick={() => this.deleteNote(note._id)}
                                                    className="btn btn-sm btn-danger text-white">Supprimer</a>
                                            </td>
                                        </tr>
                                    ))
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        )
    }
}
                                    
                                

2- إضافة les routes ديال ل frontend


غادي تمشي للملف app.js فيه غادي نزيدو les routes ديالنا أول حاجة كنسترجع les components كاملين منبعد كنزيد les routes لي كيديو لكل component.

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

                                    
                                        //
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Notes from './components/Notes';
import EditNote from './components/EdiNote';
import AddNotes from './components/AddNotes';
import Menu from './components/Menu';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <Menu />
      <Switch>
        <Route path="/" exact component={Notes} />
        <Route path="/add/note" exact component={AddNotes} />
        <Route path="/edit/note/:id" exact component={EditNote} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;
                                    
                                

كلمات مفاتيح :