REACT_FULLSTACK [3] Client

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

좋은 웹페이지 즐겨찾기