dir.by  
Праздники ...
Праздники ...
День Святого Валентина (14 Февраля)
Концерты, выставки, цирки ...
Концерты, выставки, цирки ...
Спектакль "Ромео и Джульетта" г. Минск 29 января, 14 февраля, 14 марта, 19 марта 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Шахматно-шашечный клуб
Спорт занятие
Компьютеры, игры, программирование
Компьютеры, игры, программирование
Объявления ...
Объявления ...
Новогодние искусственные елки от первого поставщика GreenTerra
Объявление
Форум (ваши вопросы, обсуждение)
Форум (ваши вопросы, обсуждение)
Программирование, разработка, тестирование
→
React
→
Создаем веб-приложение "Login форма и отправка post запроса" с React | Visual Studio Code
  Посмотрели 1029 раз(а)    
 Создаем веб-приложение "Login форма и отправка post запроса" с React | Visual Studio Code 
последнее обновление: 19 февраля 2025
Скачать пример
my_react_login_form,zip ...
размер: 3 килобайта
Структура файлов:
D:/my_react_login_form
        .babelrc                          конфигурационный файл для Babel
        index.html
        package.json                  конфигурационный файл для Node.js (содержит названия пакетов)
        style.css                         Стили для html
        webpack.config.js         конфигурационный файл для Webpack (как объединять js файлы в один)
        .vscode
                launch.json            конфигурационный файл для Visual Studio Code (путь к запускаемому файлу)
        src
                main.js
        build
                transformed.js       после запуска Webpack сгенерируется этот файл
На заметку! У вас должна быть установлена Node.js. Если у вас ее нет то нужно скачать и установить Node.js ...

На заметку! У вас должна быть установлена Visual Studio Code. Если у вас ее нет то нужно скачать и установить Visual Studio Code ...
 
Шаг 1. Создаем новое React приложение
Создаем новое web приложение с React в Visual Studio Code ...
Шаг 2. Добавим код в файл main.js
Метод render вызывается библиотекой React.

Когда мы нажмем на кнопку Login будет вызван мой метод onLoginSubmit.
Мой метод onLoginSubmit отправляет http запрос на сайт https://dir.by/developer/myapi/login.php (для этого я вызываю команду axios.post).
Сейчас при написании React приложений Component не используется после 2020 года.
Наша React программа это function.
function возвращает html это и есть внешний вид приложения.
Использовать Component это плохое правило.
Использовать function это хорошее правило.
Файл main.js
  JavaScript  
var React = require("react");
var ReactDOM = require("react-dom");
import { Component } from "react";
import axios from 'axios';

class MyApp extends Component {

     onLoginSubmit(e) {
          e.preventDefault();

          let urlLogin = "https://dir.by/developer/myapi/login.php";

          let sendObject =
               { 'login': e.target.login.value, 'password': e.target.password.value };

          let axiosConfig =
               { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };

          axios.post(urlLogin, sendObject, axiosConfig)
               .then(function (response) {
                    alert(JSON.stringify(response.data))
               })
               .catch(function (error) {
                    alert("Error ! " + error)
               });
     }

     render() {
          return (
               <div class="container1">
                    <div class="container2">
                         <div class="form1">
                              <h2> Welcome </h2>
                              <form onSubmit={ this.onLoginSubmit }>
                                   <div>
                                        <input type="text" name="login" />
                                   </div>
                                   <div className="vert1">
                                        <input type="text" name="password" />
                                   </div>
                                   <div className="vert1">
                                        <button>Login</button>
                                   </div>
                              </form>
                         </div>
                    </div>
               </div>
          );
     }
}

ReactDOM.render(
     <MyApp ></MyApp>,
     document.getElementById('my_container'));
Файл main.js
  JavaScript  
var React = require("react");
var ReactDOM = require("react-dom");
import axios from 'axios';

 
function MyApp() {

     const onLoginSubmit = (e) => {
          e.preventDefault();

          let urlLogin = "https://dir.by/developer/myapi/login.php";

          let sendObject =
               { 'login': e.target.login.value, 'password': e.target.password.value };

          let axiosConfig =
               { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };

          axios.post(urlLogin, sendObject, axiosConfig)
          .then(function (response) {
               alert(JSON.stringify(response.data))
          })
          .catch(function (error) {
               alert("Error ! " + error)
          });
     }

 
     return (
     <div class="container1">
          <div class="container2">
               <div class="form1">
                    <h2> Welcome </h2>
                    <form onSubmit= { onLoginSubmit } >
                         <div>
                              <input type="text" name="login" />
                         </div>
                         <div className="vert1">
                              <input type="text" name="password" />
                         </div>
                         <div className="vert1">
                              <button>Login</button>
                         </div>
                    </form>
               </div>
          </div>
     </div>
     );
 
}

ReactDOM.render(
     <MyApp ></MyApp>,
     document.getElementById('my_container'));
Шаг 3. Добавим код в файл style.css
  CSS     Файл style.css
.vert1 {
     padding-top:20px;
}

.container1 {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
}

.container2 {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color: #cccccc;
     height: 50%;
     width: 50%;
}
Шаг 4. Сервер получает post запрос. Сервер создает ответ вот в файле login.php
  PHP     Файл login.php
<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

header('Content-Type: application/json');

$response = array();
$response['success'] = false;

if ($_REQUEST['login']=='evgen' && $_REQUEST['password']=='12345')
{
     $response['success'] = true;
     $response['token'] = "123123dasa213ws212";
}

echo json_encode($response);

?>
Как запустить пример локально у себя на компьютере?
Шаг 1.
Открываем
Visual Studio Code
и выбираем React проект
В Visual Studio Code нажимаем на меню File → Open Folder
и выбираем папку D:/my_react_login_form
Шаг 2.
Устанавливаем библиотеки
В Visual Studio Code нажимаем на меню Terminal → New Terminal
Выполним:
npm install


Смотрите картинку:


Объяснение:
В этом zip архиве нет js библиотек.
Название и версии js библиотек написаны в файле package.json.
При выполнении в командной строке npm install библиотеки с названием и версии из package.json скачаются из интернета и установятся в папку node_modules.
Шаг 3.
Компилируем React проект
Выполним:
npm run MyBuild


Смотрите картинку:

Объяснение:
Команда npm run MyBuild запускает скрипт MyBuild.
Скрипт MyBuild определен в файле package.json.
Файл D:/my_react_login_form/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

Скрипт MyBuild запустит Webpack.
Webpack возьмеи файл evgen.js и возьмет файлы React и весь код из этих файлов запакует в один файл transformed.js
Шаг 4.
Запускаем React проект
В Visual Studio Code нажимаем на меню Run → Run Without Debugging

Смотрите картинку:

В браузере Google Chrome откроется новая страница с адресом: file:///D:/my_react_login_form/index.html
 
Смотрите картинку:


Объяснение:
Запускается index.html
потому что файл настройки .vscode/launch.json содержит вот такой параметр:
"url": "${workspaceFolder}/index.html"

Файл настройки .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "${workspaceFolder}/index.html"
     }
]}
На заметку!
Если поменяли файл src/main.js, то нужно:
 
Идти на шаг 3 (компилируем React проект) ...
 
Идти на шаг 4 (запускаем React проект) ...
 
← Предыдущая тема
Почему не используют class Component, а надо использовать обычную функцию в React приложении?
 
Следующая тема →
Сайты для изучения React
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)
Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Новое приложение React
Вариант 1
• Создаем новое web приложение с React в текстовом редакторе. Библиотеку React не скачиваем, библиотеку React берем из CDN (ссылаемся на библиотеку React)
Вариант 2 (для меня лучший)
• Создание нового веб-приложения с React с помощью Visual Studio Code. Использую: Node.js + Webpack (собираем все js файлы, библиотеки в один js файл) + Babel (расширенная js функциональность с jsx и классами) + React (пишем нашу компоненту)
Описание React
• Почему не используют class Component, а надо использовать обычную функцию в React приложении?
Примеры
• Создаем веб-приложение "Login форма и отправка post запроса" с React | Visual Studio Code
WWW сайты для изучения React
• Сайты для изучения React
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика