Mern stack from scratch الجزء الثاني
نظرة سريعة بالفيديو
1- إضافة les routes ديالنا
//
const express = require('express');
const { getAllNotes, addNote, updateNote, deleteNote, noteById } = require('../controllers/note.controller');
const noteRoutes = express.Router();
noteRoutes.get('/notes', getAllNotes);
noteRoutes.post('/notes/add', addNote);
noteRoutes.put('/notes/:id', updateNote);
noteRoutes.delete('/notes/:id', deleteNote);
noteRoutes.get('/notes/:id', noteById);
module.exports = {
noteRoutes
}
2- إضافة react ل projet ديالنا
منبعد غادي نزيدو react ل projet ديالنا غادي نزيدو dossier سميه frontend فيه غادي تدير ل commande :
create-react-app
من بعد ميتزاد كلشي غادي ن installer axios و react-router-dom باش نزيد les routes ديالي :
دير la commande :
npm i axios react-router-dom
منبعد ميتزادو زيد dossier جديد ف frontend سميه components غادي تزيد فيه fichier سميه AddNotes.jsx.
فيه الفورم لي غادي يمكنا من إضافة note جديدة كنسترجع القيم من الحقول ومنبعد كنرسلهم ل route
http://localhost:3200/notes/add
لي سبق وزدنا.
الكود ديال الملف هو :
//
import React, { Component } from 'react';
import axios from 'axios';
export default class AddNotes extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: ''
}
}
handleInputChange = event => {
this.setState({
[event.target.name]: event.target.value
})
}
handleFormSubmit = event => {
event.preventDefault();
const note = {
title: this.state.title,
body: this.state.body
}
axios.post('http://localhost:3200/notes/add', note)
.then(res => {
this.setState({
title: '',
body: ''
});
this.props.history.push('/');
}).catch(err => console.log(err));
}
render() {
return (
<div className="container">
<div className="row my-4">
<div className="col-md-6 mx-auto">
<div className="card bg-light">
<div className="card-header">Ajouter une note</div>
<div className="card-body">
<form method="post" onSubmit={this.handleFormSubmit}>
<div class="form-group">
<label for="">Titre*</label>
<input
onChange={this.handleInputChange}
value={this.state.title}
type="text"
name="title" id=""
required class="form-control" placeholder="Titre" />
</div>
<div class="form-group">
<label for="">Description*</label>
<textarea
onChange={this.handleInputChange}
value={this.state.body}
class="form-control" required name="body" id="" rows="3" placeholder="Description"></textarea>
</div>
<div className="form-group">
<button className="btn btn-primary" type="submit">Valider</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
3- إضافة component ل EditNote
دائما ف components غادي تزيد فيه fichier جديد سميه EditNote.jsx.
فيه الفورم لي غادي يمكنا من تعديل note أول حاجة كنسترجع note بل id ديالها من بعد كنعرض القيم فالفورم .
منبعد كنسترجع القيم من الحقول وكنرسلهم ل route
لي سبق وزدنا مع ل id ديال ال note لي غادي تعدل.
الكود ديال الملف هو :
//
import React, { Component } from 'react';
import axios from 'axios';
export default class EditNote extends Component {
constructor(props) {
super(props);
this.state = {
note: {
title: '',
body: ''
}
}
}
componentDidMount() {
axios.get(`http://localhost:3200/notes/${this.props.match.params.id}`)
.then(res => {
console.log(res.data);
this.setState({
note: res.data.note
})
}).catch(err => console.log(err));
}
handleTitleInputChange = event => {
let oldNote = this.state.note;
oldNote.title = event.target.value;
this.setState({
note: oldNote
})
}
handleBodyInputChange = event => {
let oldNote = this.state.note;
oldNote.body = event.target.value;
this.setState({
note: oldNote
})
}
handleFormSubmit = event => {
event.preventDefault();
const note = {
title: this.state.note.title,
body: this.state.note.body
}
axios.put(`http://localhost:3200/notes/${this.props.match.params.id}`, note)
.then(res => {
this.setState({
title: '',
body: ''
});
this.props.history.push('/');
}).catch(err => console.log(err));
}
render() {
return (
<div className="container">
<div className="row my-4">
<div className="col-md-6 mx-auto">
<div className="card bg-light">
<div className="card-header">Modifier une note</div>
<div className="card-body">
<form method="post" onSubmit={this.handleFormSubmit}>
<div className="form-group">
<label htmlFor="">Titre*</label>
<input
onChange={this.handleTitleInputChange}
value={this.state.note.title}
type="text"
name="title" id=""
required className="form-control" placeholder="Titre" />
</div>
<div className="form-group">
<label htmlFor="">Description*</label>
<textarea
onChange={this.handleBodyInputChange}
value={this.state.note.body}
className="form-control" required name="body" id="" rows="3" placeholder="Description"></textarea>
</div>
<div className="form-group">
<button className="btn btn-primary" type="submit">Valider</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
4- إضافة component ل Menu
دائما ف components غادي تزيد فيه fichier جديد سميه Menu.jsx.
فيه غادي تكون ل Menu ديالنا لي غادي يكونوا فيها الروابط لي غادي نحتاجوا.
الكود ديال الملف هو :
//
import React from 'react';
import { Link } from 'react-router-dom';
export default function Menu() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<Link className="navbar-brand" to="/">Notes App</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<Link className="nav-item nav-link active" to="/">Notes <span className="sr-only">(current)</span></Link>
<Link className="nav-item nav-link" to="/add/note">Ajouter Une Note <span className="sr-only"></span></Link>
</div>
</div>
</nav>
)
}