Как создать фронтенд на React и подключить его к бэкенду?

в этом учебном пособии вы создадите приложение список дел, используя react, и подключите его к серверной службе этот проект является идеальной отправной точкой, поскольку он включает в себя основные операции crud (создание, чтение, обновление, удаление) и простой пользовательский интерфейс в конце вы получите полностью функциональное приложение с подключенной серверной частью, демонстрируя, как интегрировать управляемые серверные службы в ваш рабочий процесс разработки создание полнофункционального приложения с нуля часто требует настройки серверной части, управления базой данных, обработки аутентификации и развертывания инфраструктуры эти задачи могут быть сложными и времязатратными, особенно если вы сосредоточены на разработке фронтенда, и мы будем использовать back4app для этой цели back4app упрощает этот процесс, предоставляя масштабируемую серверную службу как услугу (baas) решение, позволяя вам сосредоточиться на создании вашего приложения, в то время как оно обрабатывает хостинг, базы данных и api back4app предлагает серверные услуги, включая готовую к использованию базу данных, аутентификацию, cloud code для серверной логики и sdk для бесшовной интеграции он также поддерживает контейнеризированные развертывания, что делает его гибким выбором для хостинга полнофункциональных приложений с этими функциями вы можете быстро создавать и развертывать приложения, не управляя серверной инфраструктурой основные выводы читая эту статью, вы научитесь настройте современный проект react, используя стандартные инструменты отрасли бесшовно интегрируйте серверную службу для управления данными приложения реализуйте основные операции crud для динамичного пользовательского опыта разверните полностью функциональное приложение todo и посмотрите, как оно работает на todo app предварительные требования чтобы эффективно следовать этому руководству, убедитесь, что у вас есть следующие инструменты и навыки node js и npm установлены на вашем компьютере вы будете использовать npm для установки зависимостей и запуска вашего приложения react проверьте установку, выполнив команды node v и npm v в вашем терминале базовые знания react , включая функциональные компоненты, управление состоянием с помощью хуков и обработку пользовательского ввода это руководство не охватывает основы react, поэтому ожидается знакомство с jsx и структурой компонентов аккаунт back4app для настройки и управления вашими серверными службами зарегистрируйтесь на back4app https //www back4app com/ , если у вас нет аккаунта с этими условиями вы готовы настроить свой проект и начать разработку настройка проекта чтобы начать, вам нужно настроить вашу локальную среду разработки и инициализировать ваш фронтенд проект с помощью vite это обеспечит быструю и эффективную разработку, сохраняя при этом чистую структуру вашего проекта сначала убедитесь, что у вас установлен node js (версия lts) если нет, загрузите его с nodejs org https //nodejs org/ и установите его после установки проверьте это, выполнив node v npm v теперь инициализируйте ваш проект react с помощью vite , современного инструмента сборки, который предлагает превосходную скорость по сравнению с create react app запустите следующую команду в вашем терминале, заменив todo app на предпочитаемое имя проекта npm create vite\@latest todo app template react перейдите в папку проекта cd todo app установите необходимые зависимости npm install запустите сервер разработки, чтобы проверить настройку npm run dev это запускает ваше react приложение локально откройте предоставленный url в вашем браузере, чтобы подтвердить, что оно работает после настройки фронтенда следующим шагом будет создание бэкенда на back4app для обработки хранения данных и взаимодействия с api создание бэкенда для задач back4app предоставляет полностью управляемый бэкенд сервис на базе parse , предлагая nosql базу данных, аутентификацию, cloud code и генерацию api из коробки это позволяет вам управлять данными вашего приложения, не создавая бэкенд с нуля вы создадите модель данных task для хранения элементов списка дел и свяжете её с вашим react фронтендом создание бэкенд приложения войдите в вашу панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " введите имя для вашего приложения (например, todoapp ) и выберите nodejs/parse в качестве типа бэкенда после создания перейдите в "база данных" > "обозреватель" , нажмите "создать класс" , и выберите "пользовательский" назовите его task и установите разрешения на уровне класса для разрешения публичного чтения и записи (вы можете уточнить это позже) в классе task добавьте следующие поля title (строка) – заголовок задачи description (строка) – подробности задачи completed (булевый) – статус выполнения duedate (дата) – срок выполнения задачи нажмите "сохранить" для создания схемы подключение back4app к react теперь интегрируйте back4app в ваш проект react, используя parse javascript sdk для связи с сервером установите его через npm npm install parse далее настройте sdk, инициализировав его с вашим application id и javascript key получите эти учетные данные из back4app dashboard в разделе app settings > security & keys страница ключей back4app с выделенными id приложения и js ключом внутри src/main jsx , настройте parse, импортировав минимизированный sdk и инициализировав его с вашим application id и javascript key import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; с подключенной вашей серверной частью вы можете создать to do list ui и интегрировать операции crud разработка фронтенда теперь, когда ваша серверная часть настроена и подключена, пришло время создать to do list ui на react вы создадите компоненты для добавления, отображения, обновления и удаления задач, эффективно управляя состоянием структурирование компонентов ваше приложение будет состоять из трех ключевых компонентов taskform jsx – обрабатывает добавление новых задач tasklist jsx – отображает все задачи и предоставляет элементы управления для пометки задач как завершенные или их удаления taskitem jsx – представляет собой одну задачу с действиями, такими как пометка как завершенная или удаление начните с создания components папки внутри src и добавьте эти файлы mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx управление состоянием вы будете использовать usestate и useeffect хуки для управления задачами локально, пока получаете и обновляете данные из back4app сначала определите состояние внутри app jsx import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; создание формы задачи внутри taskform jsx , создайте управляемую форму для добавления новых задач это будет хранить значения ввода в состоянии и отправлять данные в back4app import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; отображение задач внутри tasklist jsx , отобразите список задач и включите действия для их отметки как выполненных и удаления import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; компонент элемента задачи внутри taskitem jsx , определите действия для отметки задачи как завершенной или удаления ее из back4app import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; стилизация приложения создайте файл styles css в src и добавьте базовые стили / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } импортируйте этот css в main jsx import " /styles css"; интерфейс приложения ваш to do list app теперь имеет работающий фронтенд с интерфейсом react, интеграцией back4app и базовым стилем завершенное приложение списка дел далее вы развернете этот фронтенд на back4app web deployment развертывание фронтенда на back4app web deployment back4app web deployment предоставляет полностью управляемую, контейнеризованную среду для развертывания приложений он поддерживает развертывания на основе docker , позволяя вам упаковать ваш фронтенд в контейнер и запустить его на инфраструктуре back4app это обеспечивает масштабируемость, безопасность и легкий ci/cd процесс, интегрируясь напрямую с github настройка vite для контейнеризации vite по умолчанию обслуживает приложения в режиме разработки для продакшена вам нужно собрать статическую версию и обслуживать её с помощью легковесного веб сервера, такого как nginx сначала обновите vite config js чтобы указать правильный базовый путь для развертывания import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); теперь выполните команду сборки, чтобы сгенерировать файлы, готовые к продакшену npm run build создание dockerfile для развертывания файл dockerfile определяет, как ваше react приложение будет контейнеризовано создайте файл с именем dockerfile в корне вашего проекта и добавьте следующую конфигурацию # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] этот dockerfile выполняет следующее использует node js для установки зависимостей и сборки приложения react копирует собранные файлы в контейнер nginx для эффективной раздачи статических файлов открывает порт 80 для обслуживания приложения сборка и тестирование контейнера локально перед развертыванием протестируйте контейнер локально, чтобы убедиться, что он работает как ожидалось выполните следующую команду для сборки образа docker docker build t todo frontend затем запустите контейнер с помощью docker run p 8080 80 todo frontend откройте http //localhost 8080 в вашем браузере, чтобы подтвердить, что ваше приложение react обслуживается правильно развертывание на github и подключение к back4app чтобы развернуть на back4app, сначала загрузите ваш проект на github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main теперь выполните следующие шаги для развертывания через платформу веб развертывания back4app войдите в веб развертывание back4app https //www back4app com/containers нажмите "создать новое приложение" , назовите ваш проект и выберите репозиторий github авторизуйте back4app для доступа к вашему github и выберите репозиторий todo app выберите развертывание dockerfile и подтвердите настройки сборки нажмите "развернуть" для запуска первой сборки управление и мониторинг развертываний после развертывания перейдите к вашему приложению в панели управления back4app здесь вы можете просматривать логи для отладки проблем мониторить перезапуски контейнеров и использование ресурсов повторно развернуть на новых коммитах, используя кнопку "запустить сборку" настроить пользовательские домены если хостите на личном домене панель развертывания веб приложения back4app развернутое приложение вы можете получить доступ к развернутому приложению, использованному в этом учебнике, по адресу https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ с вашим фронтендом, успешно развернутым, следующим шагом является тестирование и отладка, чтобы убедиться, что все работает гладко тестирование и отладка после развертывания вашего фронтенда и бэкенда вам необходимо убедиться, что приложение работает правильно это включает в себя тестирование взаимодействия фронтенда и бэкенда , выявление общих проблем и эффективную отладку ошибок интегрированное тестирование приложения чтобы убедиться, что ваш react фронтенд правильно взаимодействует с бэкендом back4app, выполните следующие шаги проверка подключения к api откройте консоль разработчика вашего браузера ( f12 → вкладка сеть ) и проверьте вызовы api при добавлении или получении задач если запросы api не удались, проверьте статус ответа и сообщения об ошибках ручное добавление и получение задач используйте интерфейс списка задач , чтобы добавить задачу обновите страницу, чтобы убедиться, что задача сохранена откройте браузер базы данных back4app и подтвердите, что задача отображается в классе задача проверка операций crud завершите и удалите задачи из интерфейса, затем проверьте изменения в базе данных back4app если обновления не отображаются, проверьте наличие ошибок в консоли браузера или в логах api тестирование крайних случаев попробуйте отправить пустые задачи, чтобы убедиться, что валидация работает симулируйте медленные интернет соединения ( chrome devtools → сеть → медленный 3g ) для тестирования производительности распространенные проблемы и устранение неполадок ошибки cors ( access control allow origin проблема) перейдите в back4app dashboard > app settings > security & keys в разделе "разрешенные заголовки и домены" , добавьте url вашего фронтенда сохраните и перезапустите бэкенд ошибки аутентификации (401 unauthorized errors) убедитесь, что id приложения и javascript ключ правильно настроены в вашем react приложении если используется аутентификация пользователя, проверьте, что токен сессии включен в api запросы проблемы с развертыванием бэкенда если api не отвечает, перейдите в back4app web deployment > logs чтобы проверить наличие ошибок в развертывании вашего бэкенда перезапустите контейнер, если это необходимо после завершения тестирования и отладки следующим шагом является реализация лучших практик использования услуг back4app для оптимизации производительности и поддерживаемости лучшие практики использования услуг back4app вот несколько лучших практик, которых вы можете придерживаться при использовании back4app оптимизация взаимодействия между фронтендом и бэкендом эффективная коммуникация между вашим фронтендом и бэкендом back4app обеспечивает плавный пользовательский опыт используйте пакетные запросы при выполнении нескольких операций, чтобы уменьшить сетевые накладные расходы const tasks = \[task1, task2, task3]; parse object saveall(tasks); для операций чтения, включите кэширование и настройте индексированные запросы в панели управления back4app, чтобы ускорить частые запросы всегда запрашивайте только необходимые поля, чтобы минимизировать размер ответа query select("title", "completed"); среда и масштабирование храните чувствительные ключи, такие как id приложения и javascript ключ , в переменных окружения вместо жесткого кодирования если вы используете vite , создайте файл env vite parse app id=your app id vite parse js key=your js key в производственной среде включите автомасштабирование для веб развертывания back4app, чтобы справиться с увеличенным трафиком мониторьте использование базы данных и оптимизируйте запросы с помощью инструмента мониторинг производительности в back4app улучшенная безопасность и производительность ограничьте разрешения на уровне класса (clps) так, чтобы только аутентифицированные пользователи могли изменять данные устанавливайте разрешения на чтение/запись динамически в зависимости от ролей пользователей task setacl(new parse acl(parse user current())); используйте облачный код для разгрузки сложной бизнес логики с фронтенда, уменьшая воздействие api и улучшая производительность наконец, включите ограничение скорости и валидацию запросов для предотвращения злоупотреблений и обеспечения целостности данных заключение теперь вы создали полнофункциональное приложение to do list, настроив фронтенд на react, интегрировав его с бэкендом back4app и развернув через контейнеризованные рабочие процессы этот процесс продемонстрировал четкий путь от локальной разработки до облачного развертывания, обеспечивая плавное взаимодействие между фронтендом и бэкендом смотрим вперед, рассмотрите улучшения, такие как расширенное управление пользователями, обновления в реальном времени и интеграции с третьими сторонами для дальнейшего обучения изучите документацию back4app https //www back4app com/docs и ресурсы поддержки сообщества