{"id":317342,"date":"2021-02-02T09:01:10","date_gmt":"2021-02-02T09:01:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=317342"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=317342","title":{"rendered":"React \u0437\u0430 60 \u0441\u0435\u043a\u0443\u043d\u0434: \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0444\u043e\u0440\u043c\u044b"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/98\/k9\/is\/98k9issmcul9hqqfqbjuflx57uo.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  \u041a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0430 React, \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 Express.<\/p>\n<p>  \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b, \u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438: \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/react-hook-form.com\/ru\" rel=\"nofollow noopener noreferrer\">react-hook-form<\/a> (+: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u043a\u0438, \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a), \u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u2014 <a href=\"https:\/\/express-validator.github.io\/\" rel=\"nofollow noopener noreferrer\">express-validator<\/a>.<\/p>\n<p>  \u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/styled-components.com\/\" rel=\"nofollow noopener noreferrer\">styled-components<\/a> (CSS-in-JS \u0438\u043b\u0438 All-in-JS, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f JSX).<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/harryheman\/React-Projects\/tree\/main\/client\/form-validation\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/codesandbox.io\/s\/form-validation-5g7vq\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0411\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0439.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u041a\u043b\u0438\u0435\u043d\u0442<\/h3>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/create-react-app.dev\/\" rel=\"nofollow noopener noreferrer\">create-react-app<\/a>:<\/p>\n<pre><code class=\"json\">yarn create react-app form-validation # \u0438\u043b\u0438 npm init react-app form-validation # \u0438\u043b\u0438 npx create-react-app form-validation <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c yarn.<\/p>\n<p>  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u0448\u043d\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n<pre><code class=\"plaintext\">public   index.html src   App.js   index.js   styles.js server.js ... <\/code><\/pre>\n<p>  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"json\"># \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 yarn add styled-components react-hook-form  # \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438) yarn add express express-validator cors  # \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438) yarn add -D nodemon  # \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 yarn add concurrently <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 styled-components \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0438\u043c\u043f\u043e\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 public\/index.html:<\/p>\n<pre><code class=\"xml\">&lt;head&gt;   ...   &lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.gstatic.com&quot; \/&gt;   &lt;link     href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Comfortaa&amp;display=swap&quot;     rel=&quot;stylesheet&quot;   \/&gt; &lt;\/head&gt; <\/code><\/pre>\n<p>  \u041d\u0430\u0448\u0430 \u0444\u043e\u0440\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0442\u0440\u0435\u0445 \u043f\u043e\u043b\u0435\u0439: \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0435\u0433\u043e \u0430\u0434\u0440\u0435\u0441 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b \u0438 \u043f\u0430\u0440\u043e\u043b\u044c. \u0423\u0441\u043b\u043e\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435:<\/p>\n<ul>\n<li>\u0418\u043c\u044f<br \/> \n<ul>\n<li>\u043e\u0442 2 \u0434\u043e 10 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432<\/li>\n<li>\u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0430<\/li>\n<\/ul>\n<p>   <\/li>\n<li>Email<br \/> \n<ul>\n<li>\u043e\u0441\u043e\u0431\u044b\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0435 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/li>\n<\/ul>\n<p>   <\/li>\n<li>\u041f\u0430\u0440\u043e\u043b\u044c<br \/> \n<ul>\n<li>8-12 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432<\/li>\n<li>\u043b\u0430\u0442\u0438\u043d\u0438\u0446\u0430: \u0431\u0443\u043a\u0432\u044b \u0432 \u043b\u044e\u0431\u043e\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435, \u0446\u0438\u0444\u0440\u044b, \u043d\u0438\u0436\u043d\u0435\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0434\u0435\u0444\u0438\u0441<\/li>\n<\/ul>\n<p>   <\/li>\n<\/ul>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (src\/styles.js; \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0442\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f VSCode \u2014 vscode-styled-components):<\/p>\n<pre><code class=\"javascript\">\/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 import styled, { createGlobalStyle } from 'styled-components'  \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 const GlobalStyle = createGlobalStyle`   body {     margin: 0;     min-height: 100vh;     display: grid;     place-items: center;     background-color: #1c1c1c;     font-family: 'Comfortaa', cursive;     font-size: 14px;     letter-spacing: 1px;     color: #f0f0f0;   } `  \/\/ \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a const StyledTitle = styled.h1`   margin: 1em;   color: orange; `  \/\/ \u0444\u043e\u0440\u043c\u0430 const StyledForm = styled.form`   margin: 0 auto;   width: 320px;   font-size: 1.2em;   text-align: center; `  \/\/ \u043f\u043e\u0434\u043f\u0438\u0441\u044c const Label = styled.label`   margin: 0.5em;   display: grid;   grid-template-columns: 1fr 2fr;   align-items: center;   text-align: left; `  \/\/ \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 const BaseInput = styled.input`   padding: 0.5em 0.75em;   font-family: inherit;   font-size: 0.9em;   letter-spacing: 1px;   outline: none;   border: none;   border-radius: 4px; `  \/\/ \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 const RegularInput = styled(BaseInput)`   background-color: #f0f0f0;   box-shadow: inset 0 0 2px orange;    &amp;:focus {     background-color: #1c1c1c;     color: #f0f0f0;     box-shadow: inset 0 0 4px yellow;   } `  \/\/ \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 const SubmitInput = styled(BaseInput)`   margin: 1em 0.5em;   background-image: linear-gradient(yellow, orange);   cursor: pointer;    &amp;:active {     box-shadow: inset 0 1px 3px #1c1c1c;   } `  \/\/ \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c const BaseText = styled.p`   font-size: 1.1em;   text-align: center;   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); `  \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 const ErrorText = styled(BaseText)`   font-size: ${(props) =&gt; (props.small ? '0.8em' : '1.1em')};   color: red; `  \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0445\u0435 const SuccessText = styled(BaseText)`   color: green; `  \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 export {   GlobalStyle,   StyledTitle,   StyledForm,   Label,   RegularInput,   SubmitInput,   ErrorText,   SuccessText } <\/code><\/pre>\n<p>  \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 src\/index.js:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import ReactDOM from 'react-dom'  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 import { GlobalStyle } from '.\/styles'  import App from '.\/App'  ReactDOM.render(   &lt;React.StrictMode&gt;     {\/* \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 *\/}     &lt;GlobalStyle \/&gt;     &lt;App \/&gt;   &lt;\/React.StrictMode&gt;,   document.getElementById('root') ) <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 (src\/App.js):<\/p>\n<pre><code class=\"javascript\">import { useState } from 'react' \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0445\u0443\u043a\u0430 \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b import { useForm } from 'react-hook-form'  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 import {   StyledTitle,   StyledForm,   Label,   RegularInput,   SubmitInput,   ErrorText,   SuccessText } from '.\/styles'  \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 function Title() {   return &lt;StyledTitle&gt;\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0444\u043e\u0440\u043c\u044b&lt;\/StyledTitle&gt; }  \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b function Form() {   \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435   const [result, setResult] = useState({     message: '',     success: false   })    \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438:   \/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044f   \/\/ \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b   const { register, errors, handleSubmit } = useForm()    \/\/ \u043e\u0431\u0449\u0438\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b   const validators = {     required: '\u041d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c'   }    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b   async function onSubmit(values) {     console.log(values)      const response = await fetch('http:\/\/localhost:5000\/server', {       method: 'POST',       headers: {         'Content-Type': 'application\/json'       },       body: JSON.stringify(values)     })      const result = await response.json()      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435     setResult({       message: result,       success: response.ok     })   }    \/\/ \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u043f\u043e\u043b\u0435\u0439 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b   function onClick() {     window.location.reload()   }    return (     &lt;&gt;       &lt;StyledForm onSubmit={handleSubmit(onSubmit)}&gt;         &lt;Label&gt;           \u0418\u043c\u044f:           &lt;RegularInput             type='text'             name='name'             \/\/ \u043f\u043e\u043b\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c\u0438             \/\/ \u044d\u0442\u043e \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c             ref={register({               ...validators,               minLength: {                 value: 2,                 message: '\u041d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0434\u0432\u0443\u0445 \u0431\u0443\u043a\u0432'               },               maxLength: {                 value: 10,                 message: '\u041d\u0435 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0441\u044f\u0442\u0438 \u0431\u0443\u043a\u0432'               },               pattern: {                 value: \/[\u0410-\u042f\u0401]{2,10}\/i,                 message: '\u0422\u043e\u043b\u044c\u043a\u043e \u043a\u0438\u0440\u0440\u0438\u043b\u0438\u0446\u0430'               }             })}             defaultValue='\u0418\u0432\u0430\u043d'           \/&gt;         &lt;\/Label&gt;         {\/* \u043e\u0448\u0438\u0431\u043a\u0438 *\/}         &lt;ErrorText small&gt;{errors.name &amp;&amp; errors.name.message}&lt;\/ErrorText&gt;          &lt;Label&gt;           Email:           &lt;RegularInput             type='email'             name='email'             ref={register({               ...validators,               pattern: {                 value: \/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$\/i,                 message: '\u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b'               }             })}             defaultValue='email@example.com'           \/&gt;         &lt;\/Label&gt;         &lt;ErrorText small&gt;{errors.email &amp;&amp; errors.email.message}&lt;\/ErrorText&gt;          &lt;Label&gt;           \u041f\u0430\u0440\u043e\u043b\u044c:           &lt;RegularInput             type='password'             name='password'             ref={register({               ...validators,               pattern: {                 value: \/^[A-Z0-9_-]{8,12}$\/i,                 message:                   '\u041e\u0442 8 \u0434\u043e 12 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432: \u043b\u0430\u0442\u0438\u043d\u0438\u0446\u0430, \u0446\u0438\u0444\u0440\u044b, \u043d\u0438\u0436\u043d\u0435\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0434\u0435\u0444\u0438\u0441'               }             })}             defaultValue='password'           \/&gt;         &lt;\/Label&gt;         &lt;ErrorText small&gt;           {errors.password &amp;&amp; errors.password.message}         &lt;\/ErrorText&gt;          &lt;SubmitInput type='submit' defaultValue='\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c' \/&gt;          {\/* \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 &quot;as&quot;, \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c &quot;\u0438\u043d\u043f\u0443\u0442&quot; \u0432 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 *\/}         &lt;SubmitInput as='button' onClick={onClick}&gt;           \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c         &lt;\/SubmitInput&gt;       &lt;\/StyledForm&gt;        {\/* \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b *\/}       {result.success ? (         &lt;SuccessText&gt;{result.message}&lt;\/SuccessText&gt;       ) : (         &lt;ErrorText&gt;{result.message}&lt;\/ErrorText&gt;       )}     &lt;\/&gt;   ) }  export default function App() {   return (     &lt;&gt;       &lt;Title \/&gt;       &lt;Form \/&gt;     &lt;\/&gt;   ) } <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 register() \u0445\u0443\u043a\u0430 useForm() \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0442\u0435\u0433\u0430 input. <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTML\/Element\/Input\" rel=\"nofollow noopener noreferrer\">\u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0430\u043a\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/a>. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e yarn start \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u043e\u0440\u043c\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/e6\/cz\/5d\/e6cz5dp4aazpden9c6q4khtcg0a.png\"><\/p>\n<p>  \u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f. \u041d\u043e \u0435\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<h3>\u0421\u0435\u0440\u0432\u0435\u0440<\/h3>\n<p>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (server.js):<\/p>\n<pre><code class=\"javascript\">const express = require('express') \/\/ body \u0447\u0438\u0442\u0430\u0435\u0442 \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \/\/ validationResult - \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 const { body, validationResult } = require('express-validator') const cors = require('cors')  const app = express() const PORT = process.env.PORT || 5000  app.use(cors()) app.use(express.json()) app.use(express.urlencoded({ extended: false }))  \/\/ \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b const validators = [   body('name').trim().notEmpty().isAlpha('ru-RU').escape(),   body('email').normalizeEmail().isEmail(),   \/\/ \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440   body('password').custom((value) =&gt; {     const regex = \/^[A-Z0-9_-]{8,12}$\/i      if (!regex.test(value)) throw new Error('\u041f\u0430\u0440\u043e\u043b\u044c \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0443')      return true   }) ]  \/\/ \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 middleware app.post('\/server', validators, (req, res) =&gt; {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438   const { errors } = validationResult(req)    console.log(errors)    \/\/ \u0435\u0441\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c   if (errors.length) {     res.status(400).json('\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u043b\u0430\u0441\u044c')   } else {     res.status(201).json('\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0448\u043b\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e')   } })  app.listen(PORT, () =&gt; {   console.log(`\u0421\u0435\u0440\u0432\u0435\u0440 \u0433\u043e\u0442\u043e\u0432. \u041f\u043e\u0440\u0442: ${PORT}`) }) <\/code><\/pre>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/github.com\/validatorjs\/validator.js\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 package.json \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u2014 \u00abserver\u00bb \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u00abdev\u00bb \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">&quot;scripts&quot;: {   &quot;start&quot;: &quot;react-scripts start&quot;,   &quot;build&quot;: &quot;react-scripts build&quot;,   &quot;server&quot;: &quot;nodemon server&quot;,   &quot;dev&quot;: &quot;concurrently \\&quot;yarn server\\&quot; \\&quot;yarn start\\&quot;&quot; } <\/code><\/pre>\n<p>  \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c yarn dev \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u043e\u0440\u043c\u044b:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fi\/ju\/16\/fiju16a32mz__e1m3pgpmh9wcxc.png\"><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kn\/pg\/vp\/knpgvpyjpfpyzldwwurg-hkmbgk.png\"><\/p>\n<p>  \u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n<p>  \u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u043c, \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u043b\u0438\u0448\u044c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u0432, \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 HTML (<a href=\"https:\/\/github.com\/harryheman\/JavaScript-Projects\/tree\/master\/server\/form-data\" rel=\"nofollow noopener noreferrer\">GitHub<\/a>, <a href=\"https:\/\/codesandbox.io\/s\/form-data-send-beacon-xm2w7\" rel=\"nofollow noopener noreferrer\">CodeSandbox<\/a>).<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/540462\/\"> https:\/\/habr.com\/ru\/post\/540462\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/98\/k9\/is\/98k9issmcul9hqqfqbjuflx57uo.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  \u041a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0430 React, \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 Express.<\/p>\n<p>  \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b, \u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438: \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/react-hook-form.com\/ru\" rel=\"nofollow noopener noreferrer\">react-hook-form<\/a> (+: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u043a\u0438, \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a), \u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u2014 <a href=\"https:\/\/express-validator.github.io\/\" rel=\"nofollow noopener noreferrer\">express-validator<\/a>.<\/p>\n<p>  \u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/styled-components.com\/\" rel=\"nofollow noopener noreferrer\">styled-components<\/a> (CSS-in-JS \u0438\u043b\u0438 All-in-JS, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f JSX).<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/harryheman\/React-Projects\/tree\/main\/client\/form-validation\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/codesandbox.io\/s\/form-validation-5g7vq\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0411\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0439.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-317342","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/317342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=317342"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/317342\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=317342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=317342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=317342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}