Client

• cd client
• in client folder, npx create-react-app .
• when the download is finished ,
  
• npm start

in src folder

• delete App.test.js, index.css, logo.svg, setupTests.js

Let's organize what's written App.css and App.js

• in App.css

• 

• delete import './index.css;' in index.js`and in App.js`
  

• then when u refresh the page, it will be empty page
  

install Axios

• in client folder, npm install axios

App.js

• import axios from 'axios';
• import { useEffect } from 'react';
• and add some codes in App function.
  

server folder , and install cors

• and change directory to server folder

• first, we have to run mysql.server start in terminal and in server folder, npm start

• and npm install cors , add code(const cors = require('cors'); , and for useing middleware, app.use(cors());) in index.js (server folder)

• when server is running, go to http://localhost:3001/posts
  

• and we should inspect console.log(response) what we wrote in App.js from Client folder.
  

• From this picture, we can see that the api request was successful.

• if we want to see datas from DB, add .data in console.log(response.data)

• then you can see datas from TutorialDB
  

for display our datas -> use a useState

• in App.js in Client , add useState besides useEffect and make a State
  
  -in page,
  

edit in App.css (Client)

.App {
  width: 100vw;
  height: auto;
  display: flex;
  align-items: center;
  padding-top: 40px;
  flex-direction: column;
}

body {
  margin: 0;
  padding: 0;
}

.post {
  width: 400px;
  height: 300px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  border: 1px solid lightgray;
  font-family: Arial, Helvetica, sans-serif;

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.post:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  cursor: pointer;
}

.post .title {
  flex: 20%;
  border-bottom: 1px solid lightgray;
  background-color: dodgerblue;
  display: grid;
  place-content: center;
  color: white;
}

.post .body {
  flex: 60%;
  display: grid;
  place-content: center;
}

.post .footer {
  flex: 20%;
  border-top: 1px solid lightgray;
  display: flex;
  align-items: center;
  padding-left: 15px;
  background-color: dodgerblue;
  color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

• in page