Введение:
В первой части этого урока я показал вам, как создать серверную часть. Это включало NodeJS/Express API и его подключение к базе данных Mongo. Мы создали простой CRUD API для создания, чтения, обновления и удаления задач. В этой части мы создадим интерфейс с помощью React JS.
Руководство:
Мы собираемся начать этот проект в корне нашего каталога todo-app. Мы собираемся использовать инструмент командной строки create-react-app, созданный Facebook. Преимущество этого инструмента в том, что он требует много догадок о том, как создать и подготовить свой проект. Он поставляется со многими технологиями из коробки. Для краткого руководства по установке create-react-app перейдите по этой ссылке. После установки запустите команду npx create-react-app todo-client из нашего основного каталога todo-app. Это создаст наше приложение React. Вы можете запустить его, введя npm start из созданного каталога todo-client.
Очистка:
Есть несколько вещей, которые нам нужно убрать из созданного проекта. В каталоге «src» вы можете удалить файлы App.css и App.test.js. Мы не будем использовать их для этого урока. В App.js замените весь файл следующим кодом:
Список дел:
Для начала мы собираемся создать компонент React, в котором будут перечислены все задачи, полученные из нашего API. Создайте каталог «components» в нашем основном каталоге «src». В каталоге «components» создайте каталог «Todos». Здесь будут жить все наши реагирующие компоненты, относящиеся к Todos. Теперь создайте файл TodoList.js и поместите в него следующий код:
Чтобы это работало, вам нужно установить axios. Axios — это библиотека javascript, которая предоставляет разработчикам HTTP-клиент на основе обещаний. Это то, что мы будем использовать для взаимодействия с нашим API. Установите это в наш «todo-client», запустив «npm install axios». В этот момент я понимаю, что не настроил CORS в своем API. CORS (Cross Origin Resource Sharing) — это механизм, который указывает браузеру предоставить веб-приложению, работающему в одном источнике, доступ к ресурсам в другом источнике. Поскольку наш API работает отдельно от нашего внешнего интерфейса, нам нужно это настроить. К счастью, это очень просто в экспрессе. Добавьте следующий код в файл server.js:
Строка, которую вы увидите, которая настраивает cors, — это «app.use(cross())», которую мы установили с помощью «npm install cors».
Далее мы создадим форму todo. В нашем каталоге component/Todos создайте файл TodoForm.js и поместите в него следующий код:
В нашем компоненте Todo Form мы используем хук useState для управления состоянием компонента. при изменении каждого ввода он обновляет локальное состояние, чтобы отразить то, что было введено в поле ввода/текстовое поле. Действие при отправке берет то, что находится в текущем состоянии, и отправляет его в API для создания новой задачи. Создав эту форму, нам нужно добавить ее в наш основной компонент «App.js», чтобы она была доступна.
Удалить и завершить:
Последние две функции, которые мы добавим, — это возможность завершить и удалить задачу. Для этого нам нужно разбить наши задачи на отдельные компоненты. В каталоге component/Todo создайте файл Todo.js и напишите следующий код:
Чтобы это работало, нам нужно добавить компонент «Todo» в компонент «TodoList». Нам также необходимо добавить методы deleteTodo и completeTodo в базовый компонент TodoList, которые будут обращаться к API и выполнять эти функции, когда установлен флажок или нажата кнопка удаления:
Теперь, когда вы запускаете свое приложение React и Todo API вместе, вы должны иметь возможность добавлять, обновлять и удалять задачи из своего приложения. Это очень простое приложение CRUD ReactJS. По мере роста этих приложений нам как разработчикам приходится принимать во внимание множество соображений, например, как обрабатывать состояние, как обрабатывать маршрутизацию и многие другие проблемы. Вот первая часть этого урока.
