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;
                                    
                                

3- إضافة bootstrap ل app ديالنا


ف dossier public عندي ل fichier index.html لي فيه كنزيد الروابط ديال bootstrap.

الكود ديال الملف بعد التعديل هو :

                                      
                                        //
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>
                                      
                                    

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