Поиск по сайту:

Напишите свое первое приложение React UI

Из этого руководства по JavaScript вы узнаете, как обеспечить совместную работу серверной и клиентской разработки.

Кто хочет создать свое первое UI-приложение? Да, и если вы читаете эту статью, я предполагаю, что вы тоже. В сегодняшнем примере я буду использовать JavaScript и API Express, которые я продемонстрировал в своей предыдущей статье. Во-первых, позвольте мне объяснить некоторые технологии, которые вы собираетесь использовать.

Что такое Реакт?

React — это библиотека JavaScript для создания пользовательского интерфейса (UI). Однако для функционального пользовательского интерфейса вам нужно нечто большее, чем просто библиотека пользовательского интерфейса. Вот важные компоненты веб-приложения JavaScript, которое вы собираетесь создать:

  • npx: этот пакет предназначен для выполнения пакетов npm.
  • axios: HTTP-клиент на основе обещаний для браузера и node.js. Обещание – это значение, которое предоставляет конечная точка API.
  • http-proxy-middleware: легко настраивает промежуточное программное обеспечение прокси. Прокси — это промежуточное программное обеспечение, которое помогает осуществлять обмен сообщениями от конечной точки приложения к запрашивающей стороне.

Предварительная конфигурация

Если вы еще этого не сделали, прочтите мою предыдущую статью. Вы будете использовать этот код как часть этого приложения React. В этом случае вы добавите службу, которая будет использоваться как часть приложения. В рамках этого приложения вам необходимо использовать пакет npx для создания новой структуры папок и приложения:

$ npx create-react-app count-ui
npx: installed 67 in 7.295s

Creating a new React app in /Users/cherrybomb/count-ui.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
[...]
Installing template dependencies using npm...
+ @testing-library/jest-dom@5.16.4
+ @testing-library/user-event@13.5.0
+ web-vitals@2.1.4
+ @testing-library/react@13.3.0
added 52 packages from 109 contributors in 9.858s
[...]
Success! Created count-ui at /Users/cherrybomb/count-ui
[...]
We suggest that you begin by typing:

  cd count-ui
  npm start

Как видите, команда npx создала новый шаблон со структурой папок, великолепным файлом README и репозиторием Git. Вот структура:

$ cd count-ui/
/Users/cherrybomb/count-ui

$ ls -A -1
.git
.gitignore
README.md
node_modules
package-lock.json
package.json
public
src

Этот процесс также инициализировал репозиторий Git и установил ветку на master, что является довольно крутым трюком. Затем установите пакеты npm:

$ npm install axios http-proxy-middleware
[...]
npm WARN @apideck/better-ajv-errors@0.3.4 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.
+ http-proxy-middleware@2.0.6
+ axios@0.27.2
added 2 packages from 2 contributors, updated 1 package and audited 1449 packages in 5.886s

Теперь, когда они настроены, добавьте файлы services и main.js:

$ mkdir src/services
src/services

$ touch src/services/main.js

Предварительная настройка завершена, и теперь вы можете приступить к кодированию.

Напишите код пользовательского интерфейса от начала до конца

Теперь, когда у вас все предварительно настроено, вы можете собрать сервис для своего приложения. Добавьте следующий код в файл main.js:

import axios from 'axios';
const baseURL = 'http://localhost:5001/api';
export const get = async () => await axios.get(`${baseURL}/`);
export const increment = async () => await axios.post(`${baseURL}/`);
export default {
    get,
    increment
}

В результате этого процесса создается файл JavaScript, который взаимодействует с API, который вы создали в моей предыдущей статье.

Настройка прокси

Далее вам необходимо настроить промежуточное программное обеспечение прокси, создав новый файл в каталоге src.

$ touch src/setupProxy.js

Настройте прокси-сервер с помощью этого кода в setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

В этом коде функция app.use указывает службу, которая будет использоваться как /api при подключении к существующему проекту API. Однако ничто не определяет api в коде. Здесь на помощь приходит прокси. С помощью прокси вы можете определить функцию api на уровне прокси для взаимодействия с вашим Express API. Это промежуточное программное обеспечение регистрирует запросы между обоими приложениями, поскольку пользовательский интерфейс и API используют один и тот же хост с разными портами. Им требуется прокси для передачи внутреннего трафика.

Импорт JavaScript

В базовом каталоге src вы видите, что исходный шаблон создал App.js, и вам необходимо добавить main.js (в main.js (в App.js) каталогservices) в ваш импорт в файле App.js. Вам также необходимо импортировать React в самой первой строке, поскольку он является внешним по отношению к проекту:

import React from 'react'
import main from './services/main';

Добавьте функцию рендеринга

Теперь, когда у вас есть импорт, вы должны добавить функцию рендеринга. В функции App() файла App.js добавьте первый раздел определений для react и count перед раздел возврат. Этот раздел получает счетчик от API и выводит его на экран. В функции return кнопка позволяет увеличить счетчик.

function App() {
const [count, setCount] = React.useState(0);
React.useEffect(()=>{
  async function fetchCount(){
    const newCount = (await main.get()).data.count;
    setCount(newCount);
  }
  fetchCount();
}, [setCount]);
return (  
    <div className="App">
      <header className="App-header">
        <h4>
          {count}
        </h4>
        <button onClick={async ()=>{
          setCount((await main.increment()).data.count);
        }}>
          Increment
        </button>
      </header>
    </div>
  );
}

Чтобы запустить и протестировать приложение, запустите npm run start. Вы должны увидеть результат ниже. Прежде чем запускать приложение, убедитесь, что ваш API работает из приложения Express, запустив узел ./src/index.js.

$ npm run start
> count-ui@0.1.0 start /Users/cherrybomb/count-ui
> react-scripts start

[HPM] Proxy created: /  -> http://localhost:5000
(node:71729) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:71729) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

Когда все заработает, откройте в браузере localhost:5000 и увидите красивую, по общему признанию, минимальную страницу с кнопкой:

(Джессика Черри, CC BY-SA 4.0)

Что происходит, когда вы нажимаете кнопку? (Или, в моем случае, нажмите кнопку несколько раз.)

(Джессика Черри, CC BY-SA 4.0)

Счетчик поднимается!

Поздравляем, теперь у вас есть приложение React, использующее ваш новый API.

Веб-приложения и API

Это упражнение — отличный способ научиться заставить серверную часть и интерфейс работать вместе. Примечательно, что если вы используете два хоста, вам не нужен раздел этой статьи о прокси. В любом случае, JavaScript и React — это быстрый шаблонный способ запустить интерфейс с минимальными шагами. Надеюсь, вам понравилось это прохождение. Расскажите нам, что вы думаете об обучении программированию на JavaScript.

Статьи по данной тематике: