{"id":319051,"date":"2021-03-04T15:01:16","date_gmt":"2021-03-04T15:01:16","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319051"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319051","title":{"rendered":"\u041a\u0430\u043a \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 REST API \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0441 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c"},"content":{"rendered":"\n
\n
<\/figcaption><\/figure>\n

\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 API \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c React \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u0432 Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b? \u0415\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u044d\u0442\u043e\u0442 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0432\u0430\u0441. <\/p>\n

\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b \u0438\u0437 React \u0432 Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0432\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e REST API.<\/p>\n

\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React<\/h3>\n

\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c create-react-app, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u043e\u0441\u0442\u043e \u0432\u0432\u0435\u0434\u0438\u0442\u0435 npx create-react-app react-googlesheets, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n

\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430
\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a<\/figcaption><\/figure>\n

\u041a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Semantic UI<\/h3>\n

Semantic UI \u2013 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u0412 \u043d\u0451\u043c \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u0438\u043d\u043f\u0443\u0442\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e.<\/p>\n

\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Semantic UI \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n

npm install semantic-ui-react semantic-ui-css<\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b index.js \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435:<\/p>\n
import 'semantic-ui-css\/semantic.min.css'<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b npm start.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430<\/h3>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u0438 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u0430\u043a \u0438\u043c\u044f, \u0432\u043e\u0437\u0440\u0430\u0441\u0442, \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u0430 \u0438 \u0445\u043e\u0431\u0431\u0438, \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u0444\u043e\u0440\u043c\u0443, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u0445\u0435\u0434\u0435\u0440 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 semantic-ui-react.<\/p>\n
import React, { Component } from 'react' import { Button, Form, Container, Header } from 'semantic-ui-react' import '.\/App.css';  export default class App extends Component {   render() {     return (       <Container fluid className=\"container\">         <Header as='h2'>React Google Sheets!<\/Header>         <Form className=\"form\">           <Form.Field>             <label>Name<\/label>             <input placeholder='Enter your name' \/>           <\/Form.Field>           <Form.Field>             <label>Age<\/label>             <input placeholder='Enter your age' \/>           <\/Form.Field>           <Form.Field>             <label>Salary<\/label>             <input placeholder='Enter your salary' \/>           <\/Form.Field>           <Form.Field>             <label>Hobby<\/label>             <input placeholder='Enter your hobby' \/>           <\/Form.Field>                      <Button color=\"blue\" type='submit'>Submit<\/Button>         <\/Form>       <\/Container>     )   } }<\/code><\/pre>\n
\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n
.form{   width: 500px; }  .container{   padding:20px }<\/code><\/pre>\n
\u041c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n
\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b.<\/p>\n
import React, { Component } from 'react' import { Button, Form, Container, Header } from 'semantic-ui-react' import '.\/App.css';  export default class App extends Component {   constructor(props) {     super(props)        this.state = {        name: '',        age: '',        salary: '',        hobby: ''     }   }    changeHandler = (e) => {     this.setState({[e.target.name] : e.target.value})   }    submitHandler = e => {     e.preventDefault();     console.log(this.state);   }      render() {     const { name, age, salary, hobby } = this.state;    (*)     return (       <Container fluid className=\"container\">         <Header as='h2'>React Google Sheets!<\/Header>         <Form className=\"form\" onSubmit={this.submitHandler}>           <Form.Field>             <label>Name<\/label>             <input placeholder='Enter your name' type=\"text\" name = \"name\" value = {name} onChange={this.changeHandler}\/>           <\/Form.Field>           <Form.Field>             <label>Age<\/label>             <input placeholder='Enter your age' type=\"number\" name = \"age\" value = {age} onChange={this.changeHandler}\/>           <\/Form.Field>           <Form.Field>             <label>Salary<\/label>             <input placeholder='Enter your salary' type=\"number\" name = \"salary\" value = {salary} onChange={this.changeHandler}\/>           <\/Form.Field>           <Form.Field>             <label>Hobby<\/label>             <input placeholder='Enter your hobby' type=\"text\" name = \"hobby\" value = {hobby} onChange={this.changeHandler}\/>           <\/Form.Field>                      <Button color=\"blue\" type='submit'>Submit<\/Button>         <\/Form>       <\/Container>     )   } }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u043e\u043b\u044f \u0438 \u0438\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0423 \u043d\u0430\u0441 \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 changeHandler, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 value \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 (\u0441\u0442\u0440\u043e\u043a\u0430 *).<\/p>\n
\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u2013 \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a onSubmit. \u0412 \u0442\u0435\u0433\u0435 \u0444\u043e\u0440\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 onSubmit \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c submitHandler.<\/p>\n
\u0417\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0444\u043e\u0440\u043c\u0443 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u00ab\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u00bb. \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n
\u0412\u043e\u0442 \u0438 \u0432\u0441\u0451 \u2013 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438\u043c\u044f, \u0432\u043e\u0437\u0440\u0430\u0441\u0442, \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u0443 \u0438 \u0445\u043e\u0431\u0431\u0438 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u0445 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u0430\u043a \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 Google-\u0442\u0430\u0431\u043b\u0438\u0446\u0443<\/h3>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 REST API.<\/p>\n
\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 Google Sheets, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0441 REST API, \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Axios. \u042d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a API, \u043a\u0430\u043a \u0438 fetch.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u043d\u0430\u0436\u0430\u0432 \u00ab\u0424\u0430\u0439\u043b\u00bb, \u0437\u0430\u0442\u0435\u043c \u00ab\u0421\u043e\u0437\u0434\u0430\u0442\u044c\u00bb, \u0430 \u0437\u0430\u0442\u0435\u043c  \u00ab\u0422\u0430\u0431\u043b\u0438\u0446\u0430\u00bb (\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432.: \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u201c\u041f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b\u201d).<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u0440\u0438\u0441\u0432\u043e\u0439\u0442\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0438\u043c\u044f \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0435\u0451.<\/p>\n
\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f\u00bb \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043e\u0431\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f.<\/p>\n
<\/figcaption><\/figure>\n
\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0443, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 https:\/\/sheet.best\/<\/u><\/a> \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u0443\u0447\u0451\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 URL-\u0430\u0434\u0440\u0435\u0441 \u0438\u0437 Google-\u0442\u0430\u0431\u043b\u0438\u0446 \u0432 \u043f\u043e\u043b\u0435 Connection URL.<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0430\u0436\u043c\u0438\u0442\u0435 «Connect». \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u0441\u0432\u043e\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f. \u0429\u0451\u043b\u043a\u043d\u0438\u0442\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e \u0432\u0430\u0448\u0435\u043c \u043d\u043e\u0432\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438.<\/p>\n
<\/figcaption><\/figure>\n
\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 URL-\u0430\u0434\u0440\u0435\u0441 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a\u0438 \u201cConnection URL\u201d. \u042d\u0442\u043e\u0442 URL-\u0430\u0434\u0440\u0435\u0441 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 API \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c Axios. \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b npm install axios.<\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043e\u043d \u0431\u044b\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 submitHandler.<\/p>\n
submitHandler = e => {     e.preventDefault();     console.log(this.state);      axios.post('url', this.state)     .then(response => {       console.log(response);     })   }<\/code><\/pre>\n
\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e submitHandler \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u043e\u043c. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Axios \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e URL-\u0430\u0434\u0440\u0435\u0441\u0443 \u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u043e\u0442\u0432\u0435\u0442\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 .then.<\/p>\n
\u0412\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 URL-\u0430\u0434\u0440\u0435\u0441 \u0438\u0437 sheet.best \u0432\u043c\u0435\u0441\u0442\u043e \u2018url\u2019 \u0432 axios.post(\u2018url\u2019)<\/p>\n
submitHandler = e => {     e.preventDefault();     console.log(this.state);      axios.post('https:\/\/sheet.best\/api\/sheets\/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)     .then(response => {       console.log(response);     })   }<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443: \u0438\u043c\u044f, \u0432\u043e\u0437\u0440\u0430\u0441\u0442, \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u0430 \u0438 \u0445\u043e\u0431\u0431\u0438. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0435\u0451 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0438\u043d\u0430\u0447\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b \u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0443.<\/p>\n
<\/figcaption><\/figure>\n
 \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u043b\u044f \u0438\u043c\u0435\u043d\u0438, \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430, \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u044b \u0438 \u0445\u043e\u0431\u0431\u0438<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0444\u043e\u0440\u043c\u0443. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0432\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443.<\/p>\n
\"\u0424\u043e\u0440\u043c\u0430\"
\u0424\u043e\u0440\u043c\u0430<\/figcaption><\/figure>\n
\"\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439
\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/figcaption><\/figure>\n
\u042d\u0442\u043e \u0432\u0441\u0451, \u0440\u0435\u0431\u044f\u0442\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 REST API. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 Google-\u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u0422\u0430\u043a\u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043a\u043e\u0434 \u043d\u0430 Github<\/u><\/a> <\/u>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c.<\/p>\n
\u0423\u0447\u0438\u0442\u0435\u0441\u044c \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c!<\/p>\n
<\/figcaption><\/figure>\n
\u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438<\/a>, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c Level Up \u043f\u043e \u043d\u0430\u0432\u044b\u043a\u0430\u043c \u0438 \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u0435 \u0438\u043b\u0438 \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e \u0441 \u043d\u0443\u043b\u044f, \u043f\u0440\u043e\u0439\u0434\u044f \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u044b SkillFactory \u0441\u043e \u0441\u043a\u0438\u0434\u043a\u043e\u0439 40% \u0438 \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434\u043e\u043c HABR<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0441\u0442 \u0435\u0449\u0435 +10% \u0441\u043a\u0438\u0434\u043a\u0438 \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435.<\/p>\n