Создание учебного приложения React: обзор компонентов и функций

Своим новичкам я предложил научиться кодить в одной из своих предыдущих работ. На протяжении всего своего пути я изучил основы Java, Spring Boot, MySql, Bootstrap, React, HTML/CSS и Javascript. Я ни в коем случае не эксперт, и я все еще учусь применять основы того, что я обнаружил в ходе побочных проектов, и сопоставлять их с тем, что я обнаружил в результате изучения политик кибербезопасности. Проект, описываемый в этой статье, использует фреймворк React, поэтому я хотел бы рассмотреть некоторые потенциальные проблемы, которые необходимо устранить:

  • Неверный URL-адрес API правильный
  • Ошибка политики CORS
  • Неверный формат данных

Прежде чем я объясню, давайте рассмотрим, для чего используются React и Axios:

Известная библиотека JavaScript для создания пользовательских интерфейсов называется React. React предлагает беспрепятственный процесс создания сложных и динамических веб-приложений благодаря виртуальному DOM и эффективному механизму обновления. В этой статье мы рассмотрим, как создать учебное приложение React и все его компоненты.

Компоненты:

  1. ДобавитьУчебники:

Процесс добавления новых руководств в список обрабатывается компонентом AddTutorials. Этот компонент включает в себя форму, в которой пользователи могут указать заголовок, описание и теги учебника. Учебник добавляется в список руководств, отображаемых на странице после отправки формы.

2. Учебники:

Список учебных пособий, добавленных пользователем, отображается компонентом TutorialLists. Заголовок, описание и теги включены для каждой инструкции в списке. Компонент также предлагает возможность изменять и удалять содержимое руководств.

3. Учебные услуги:

Служебный компонент, известный как TutorialServices, предлагает функции для добавления, изменения и удаления учебных пособий. Для выполнения этих действий и предоставления самой последней информации компоненту TutorialLists этот компонент взаимодействует с внутренним API.

4. Обработка ошибок:

При разработке этого обучающего приложения React возникло несколько проблем, которые необходимо было исправить. Вызов API в компоненте Tutorial Services был источником одной из проблем. В проблеме была виновата неправильная конечная точка API, что привело к ошибкам 400 и 500.

Еще одна ошибка касалась проверки формы компонента AddTutorials. Даже если обязательные поля были оставлены пустыми, форма все равно была отправлена.

Axios — это известная библиотека JavaScript для отправки HTTP-запросов, и React может использовать ее для получения данных с сервера. JavaScript совместим с Axios как на стороне клиента, так и на стороне сервера. Поскольку это библиотека на основе обещаний, вы можете управлять ответами, используя async/await.

Чтобы настроить Axios в вашем проекте React, вам сначала нужно установить его как зависимость, используя npm или yarn:

npm install axios
yarn add axios
import axios from 'axios';

Чтобы сделать запрос с помощью Axios, вы можете использовать метод axios.get() или axios.post(), в зависимости от типа запроса, который вам нужно сделать. Например, чтобы сделать запрос GET для получения данных с сервера, вы можете использовать следующий код:

axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

В этом примере метод axios.get() используется для выполнения запроса GET к указанному URL-адресу.

Ответ сервера возвращается в виде обещания, которое можно обработать с помощью метода .then(). Данные, возвращаемые с сервера, записываются в консоль. В случае ошибки используется метод .catch() для регистрации ошибки.

Также важно настроить HTTP-сервер для обработки запросов, сделанных Axios. Вы можете использовать сервер на базе Node.js, например Express или Koa, или облачный сервис, например Firebase или AWS.

Например, если вы решите использовать Express, вам сначала нужно будет установить его как зависимость:

npm install express
or
yarn add express
Next, create an index.js file in your server directory and import Express:
const express = require('express');
const app = express();

Затем вы можете настроить свой сервер для обработки запросов, сделанных Axios, определив маршруты и создав контроллеры для обработки запросов. Например, для обработки запроса GET для получения данных вы можете создать такой маршрут:

app.get('/data', (req, res) => {
// Code to handle the request and return data
});

В этом примере метод app.get() используется для определения маршрута GET в конечной точке /data. Параметры req и res используются для обработки запроса и возврата ответа соответственно.

Для защиты безопасности ваших данных также крайне важно установить соответствующие ограничения на стороне сервера, такие как аутентификация и разрешения. Для этого можно использовать промежуточное ПО и библиотеки типа Passport или JSON Web Tokens (JWT).

При создании приложения React, которое извлекает данные с сервера, требуется Axios и HTTP-сервер. Надежное и безопасное приложение станет возможным благодаря правильной настройке Axios и HTTP-сервера, а также реализации соответствующих мер безопасности.

В будущем блоге я покажу, как протестировать соединение REST API на серверной части с помощью Postman и Java. На данный момент все, что нужно сказать, это то, что ваш внешний локальный хост должен быть добавлен на вкладку контроллера в Eclipse или любой другой IDE, которую вы хотите использовать, чтобы Postman мог протестировать внутренние данные, которые вы используете в настоящее время. Сейчас мы просто сосредоточимся на функциях Axios, взаимодействующих с React.

Метод retrieveTutorials использует Axios для более эффективной и удобной отправки HTTP-запросов к серверному API. Однако использование Axios с React может столкнуться с проблемами, как и с любой другой технологией. Ниже приведены несколько возникших проблем и некоторые решения, которые мне удалось найти:

  1. Неверный URL-адрес API. Одной из наиболее частых проблем, с которой вы можете столкнуться, является неправильный URL-адрес API. Так как URL-адрес вашего внутреннего API должен совпадать с URL-адресом в axios.get, это необходимо. Если URL-адрес неверный, Axios не сможет подключиться к API, и функция не будет работать должным образом. Решение. Убедитесь, что URL-адрес в методе axios.get правильный и совпадает с URL-адресом вашего внутреннего API. Вы можете проверить URL-адрес на вкладке сети инструментов разработчика браузера, чтобы убедиться, что API вызывается правильно.
  2. Политика CORS. Еще одна распространенная проблема, с которой вы можете столкнуться, — это ошибка политики совместного использования ресурсов между источниками (CORS). Эта ошибка возникает, когда браузер блокирует запрос к ресурсу, расположенному в домене, отличном от того, из которого исходит запрос. Решение. Чтобы решить эту проблему, вы можете добавить заголовок CORS к ответу от API. Этот заголовок указывает, что ресурс доступен для запроса из других доменов.
  3. Неверный формат данных. Если данные, возвращаемые API, не соответствуют ожидаемому формату, вы можете столкнуться с ошибкой при попытке доступа к данным. Решение. Убедитесь, что данные, возвращаемые API, имеют правильный формат. Вы можете проверить данные ответа на вкладке сети инструментов разработчика браузера, чтобы подтвердить формат данных.

Следует отметить, что существует множество подходов к решению этих вопросов, которые могут возникнуть при работе над вашим проектом или заданием. Поэтому не думайте, что ответ, который я смог придумать, единственный, который имеет смысл.

Подводя итог, можно сказать, что создание обучающего приложения React — это один из многих подходов к изучению и пониманию концепций React. Приложение из этого поста можно использовать как полезную отправную точку для создания более сложных и динамичных приложений. AddTutorials, TutorialLists, Tutorial Services и Error Handling — это лишь некоторые из компонентов, которые дают подробный обзор того, как создать и организовать приложение React.

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