Client

• cd Client folder
  • npm install react-router-dom
  • and add pages folder in src folder

in Pages folder

• make Home.js

add a extention

Home.js

• after install that extension ,
  • try to rfce in Home.js
    
  • then we can make a code easier than before.
    

• copy every codes from App.js
  
  
• and make it empty
  

App.js (Client)

• import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
• import Home from './pages/Home';
• and try to check Client page after npm start in server folder
  

add a CreatePost.js in pages folder

• rfce
  • make a code between div tag
    

• and add some codes in App.js
  • import CreatePost from './pages/CreatePost';
  • <Route path="/createpost" exact component={CreatePost} />
    

in /createpost

in /

reason why link to CreatePost is existing every route we go to?

• because of <Link to="/createpost">Create A Post</Link> code.

use formik for make a form

• in client folder, npm install formik

in CreatePost.js

• import { Formik, Form, Field, ErrorMessage } from 'formik';
• and add some codes
  

in /createpost

edit on App.css (Client)

• 

• code

/* CREATE POST PAGE CSS */

.createPostPage {
  font-family: Arial, Helvetica, sans-serif;
  width: 100vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.formContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
  height: auto;
  padding: 20px;
  border: 5px solid dodgerblue;
  border-radius: 5px;
}

.formContainer #inputCreatePost {
  height: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px solid grey;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 20px;
}

.formContainer button {
  margin-top: 15px;
  height: 40px;
  border: none;
  background-color: lightskyblue;
  border-radius: 5px;
  color: white;
}

.formContainer button:hover {
  cursor: pointer;
  background-color: dodgerblue;
}

span {
  color: red;
}

install yup in Client folder

• npm install yup

edit CreatePost.js

in /createpost

• you can check the Object in console

validation check

post request in CreatePost.js

• import axios from 'axios'
• add this code into onSubmit function

axios.post('http://localhost:3001/posts', data).then(response => {
      console.log('it worked');
    });

and check in the page

• plus , what we wrote is added on HomePage
  

• how about DB?

  • it worked successfully
    

If I didnt input username?

• it cant be submitted
  
• how many times i clicked button , it didnt work.

result of CreatePost.js