В этом уроке показано, как построить реальное приложение с React и жеребенком. Предполагается, что вы уже прочитали руководство Как построить простой список дел и что у вас есть базовые знания о React и узле.
В этом уроке вы научитесь:
- установить связь с MySQL или Postgres,
- предоставить учетные данные для приложения безопасным образом,
- Создать модели с отношениями с множеством-одну,
- Используйте строитель запросов,
- Создайте интерфейс для проверки вашего API (Swagger UI),
- Исправить ошибки политики с одинаковым происхождением,
- разрешить пользователям войти и регистрироваться по электронной почте и паролю,
- аутентификация пользователей на фронта и бэкэнд,
- управлять контролем доступа,
- защитить от атак CSRF,
- загружать и сохранять файлы,
- Позвольте пользователям общаться с социальным провайдером (Google),
- и построить приложение для производства.
Ради простоты, приложение переднего интерфейса не будет использовать библиотеку управления государством (например, как Рукс ). Но вы, конечно, можете добавить один, если хотите. Логика, которой следует следовать, останется в основном такой же.
Обзор приложения
Приложение, которое вы создаете, – это социальное веб -сайт, где пользователи могут поделиться интересными ссылками на учебные пособия. Все сообщения будут публичными, поэтому для их просмотра не потребуется аутентификация. Публикация поста, с другой стороны, потребует создания учетной записи.
Страница подачи
Страница профиля
Страницы регистрации и входа в систему
Начать
Давайте начнем. Прежде всего, создайте новый каталог.
mkdir foal-react-tuto
Создайте бэкэнд.
cd foal-react-tuto npm install -g @foal/cli foal createapp backend-app
А затем запустите сервер разработки.
cd backend-app npm run develop
Перейти к http://localhost: 3001 в вашем браузере. Вы должны увидеть Добро пожаловать на борт сообщение.
Остальная часть учебника – Здесь Анкет
Оригинал: “https://dev.to/loicpoullain/how-to-build-a-real-world-application-with-react-and-node-foal-4dc3”