REACT_FULLSTACK [4] Client2(validation)

10617 ワード

REACT_FULLSTACK テキストリンク

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

Reference

この問題について(REACT_FULLSTACK [4] Client2(validation)), 我々は、より多くの情報をここで見つけました https://velog.io/@hunsm4n/REACTFULLSTACK-4-validation

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

すうはんてん

最初のJS