Фотография Келси Найт на Неспособный
Этот пост был ранее опубликован в Середина
В этом уроке мы обсудим интеграцию OpenCage API в Реагировать заявление.
Предварительные условия, конечно, являются ключом API OpenCage ( Если у вас его нет, просто используйте эту бесплатную регистрацию Ссылка ), a Узел платформа с пряжа или npm ; И, наконец, ваш любимый IDE или текстовый редактор.
Я предполагаю, что вы знакомы с JavaScript. В этом уроке мы собираемся использовать некоторые функции ES6, такие как Функции стрелки , классы , пусть и const заявления.
Этот урок не о настройке среды сборки для React, поэтому для простого использования мы будем использовать Create-React-App Анкет
Прежде чем мы начнем, вот исходный код . И живая версия можно найти Здесь Анкет
В качестве версии текущего узла при написании этого руководства составляет 10.12; Я предполагаю, что вы можете использовать npx как это доступно с версии 5.2.
$ npx create-react-app opencage-react-app
выводит:
Creating a new React app in \[...\]/opencage-react-app.Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...yarn add v1.10.1
\[1/4\] 🔍 Resolving packages...
\[2/4\] 🚚 Fetching packages...
\[3/4\] 🔗 Linking dependencies...
\[4/4\] 📃 Building fresh packages...
success Saved lockfile.
success Saved 11 new dependencies.
info Direct dependencies
├─ react-dom@16.5.2
├─ react-scripts@2.0.5
└─ react@16.5.2
info All dependencies
├─ babel-plugin-dynamic-import-node@2.2.0
├─ babel-preset-react-app@5.0.4
├─ confusing-browser-globals@1.0.4
├─ eslint-config-react-app@3.0.4
├─ eslint-plugin-jsx-a11y@6.1.2
├─ object.assign@4.1.0
├─ react-dev-utils@6.0.5
├─ react-dom@16.5.2
├─ react-error-overlay@5.0.5
├─ react-scripts@2.0.5
└─ react@16.5.2
✨ Done in 79.89s.Initialized a git repository.Success! Created opencage-react-app at \[...\]/opencage-react-app
Inside that directory, you can run several commands: yarn start
Starts the development server. yarn build
Bundles the app into static files for production. yarn test
Starts the test runner. yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!We suggest that you begin by typing: cd opencage-react-app
yarn startHappy hacking!
Давайте сделаем предложенные команды
$ cd opencage-react-app $ yarn start
Проект построен в режиме разработки и открывает ваш любимый браузер на http://localhost: 3000 Анкет
Страница автоматически перезагрузит, если вы внесете изменения в код. Итак, давайте сделаем это.
Прежде всего скачать OpenCage SVG логотип и скопируйте его в SRC/ папка
Откройте свой IDE или текстовый редактор с помощью папки OpenCage-React-App
Изменить файл ./src/app.js
заменять
import logo from './logo.svg';
с
import logo from './opencage-white.svg';
Приложение перестраивается, и вместо логотипа Atomic React у вас должен быть логотип с открытой клеткой.
Используйте Ctrl + c Чтобы остановить сервер разработки.
Теперь мы добавим зависимости в проект.
Сначала стиль, вы можете забрать свой любимый CSS Framework (Flexbox, Bootstrap или Material UI), для этого учебника я взял Булма Поскольку он не свободен от JavaScript, то обертка React не требуется для обеспечения простых и сфокусированных в этом уроке только на интеграции API opencage Geocode.
$ yarn add bulma
это выводит
yarn add v1.10.1 \[1/4\] 🔍 Resolving packages... \[2/4\] 🚚 Fetching packages... \[3/4\] 🔗 Linking dependencies... \[4/4\] 📃 Building fresh packages...success Saved lockfile. success Saved 3 new dependencies. info Direct dependencies ├─ bulma@0.7.2 ├─ react-dom@16.5.2 └─ react@16.5.2 info All dependencies ├─ bulma@0.7.2 ├─ react-dom@16.5.2 └─ react@16.5.2 ✨ Done in 8.61s.
Давайте создадим компонент заголовка:
Переименовать App.css в Header.css Анкет Затем редактировать Header.css , мы избежим, когда я буду видеть больной с бесконечной анимацией петли и поместим центральный текст только в заголовок. Заголовок будет заголовком, а не целой страницей порта.
Создать ./src/header.js файл:
Редактировать ./src/index.js В добавление
import 'bulma/css/bulma.css';
после
import './index.css';
теперь редактировать App.js , мы сначала используем Заголовок Составная часть И тогда мы готовим 2 столбца.
Теперь добавьте пакеты зависимости, такие как клиент API Opencage, Listletjs и ClassNames:
$ yarn add opencage-api-client leaflet classnames
- OpenCage-Api-Client Является ли клиентская библиотека для API Opencage Geoocoder API
- Listletjs известный API веб-картирования
- ClassNames Является ли JavaScript Utility LIB, чтобы помочь создать атрибуты имени класса
Мы можем запустить сервер Dev с $ пряжа Начало
Пока приложение выглядит так
В первом столбце мы настроим форму с помощью параметров ввода поиска. Во втором столбце у нас будет результаты в качестве нескольких вкладок, начиная с читаемых результатов (форматированный адрес и координаты), а также вторая вкладка с Raw Json -результатом из API. Как вы можете видеть в следующем дизайне, мы создадим два основных компонента и Геокодинг форма и Геокодингрессы
Создайте файл ./src/Geoocodingform.js
Затем создайте файл ./src/Geoocodingresults.js
Нам нужно создавать файлы ./src/resultist.js и ./src/ResultJson.js
Чтобы закончить первую часть, подключите приложение с этими двумя основными компонентами (геокодингформированием и геокодингрозами)
Редактировать ./src/app.js Файл, сначала импорт:
Теперь добавьте конструктор
Приложение обрабатывает изменения ввода текста и отправку.
Так что сначала добавьте Handlechange метод
Затем последует Handlesubmit метод
Последний штрих Для этой первой части мы добавляем основные компоненты в рендер Метод:
Вот как теперь выглядит приложение
В этой части мы добавим вкладку «Карта» в разделе результат.
Сначала давайте создадим ./src/resultmap.js файл:
Загрузите значок PIN -кода с Marker-ICon-Red.png и сохранить его до public/ папка.
Поскольку карта нуждается в высоте, мы создаем ./src/resultmap.css файл:
Назад в ./src/Geoocodingresuls.js Добавьте вкладку в уль _ раздел
А с другими результатами Содержание добавить карту:
Приложение теперь содержит карту
Я очень надеюсь, что это было полезно для вас. Если это так, пожалуйста, дайте мне знать, чтобы я мог написать больше таких сообщений. Вы всегда можете связаться со мной на Twitter И снова, если вы следовали этому уроку до конца, я действительно горжусь вами, ребята.
Ресурсы
- Геокодер данных OpenCage: https://opencagedata.com/
- Репозиторий исходного кода на GitHub: https://github.com/tsamaya/opencage-react-guide
- Демо -версия на NetLify: https://unruffled-kirch-3cd76e.netlify.com/
Оригинал: “https://dev.to/tsamaya/using-opencage-gecoder-api-with-react-5b88”