cd client
npx create-react-app .
npm start
App.test.js, index.css, logo.svg, setupTests.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
npm install axios
import axios from 'axios';
import { useEffect } from 'react';
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
App.js in Client
, add useState
besides useEffect
and make a State.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;
}