text: Using Opencage Gecoder API with REACT
  Overview
  In this tutorial, we will discuss about the integration of Opencage API into a React application.
  The prerequisites are, of course, a OpenCage API key, (if you don’t have one, simply use this free registration link), a node platform with yarn or npm; and finally your favourite IDE or Text Editor.
  I assume you are familiar with JavaScript. In this tutorial, we’re going to use some ES6 features like
  arrow functions,
  classes,
  let, and
  const statements.
  This tutorial is not about setting up a build environment for React, so for the easy use, we will use create-react-app.
  Before we start, here is the source code. And a live version can be found here.
  Setup the environment
  As current node version, when writing this guide, is 10.12; I assume you can use
  npx as it is available since version 5.2.
  $ npx create-react-app opencage-react-app
  it outputs :
  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 opencage-react-app
  yarn startHappy hacking!
  Start hacking
  First part
  Let’s do the suggested commands
  $ cd opencage-react-app
  $ yarn start
  The project is built in development mode and it opens your favourite browser on 
  The page will automatically reload if you make changes to the code. So let’s do it.
  First of all download opencage svg logo and copy it to the
  src/ folder
  Open your IDE or Text Editor with the folder
  opencage-react-app
  Edit the file
  ./src/App.js
  replace
  import logo from './logo.svg';
  with
  import logo from './opencage-white.svg';
  The app is rebuilt and instead of the atomic react logo, you should now have a Open Cage logo.
  use
  CTRL + C to stop the development server.
  We will now add dependencies to the project.
  First the style, you can pick up your favourite CSS framework (flexbox, bootstrap or material UI), for this tutorial I picked up Bulma as it is javascript free, then no react wrapper is needed to keep this tutorial simple and focused only on opencage geocode API integration.
  $ yarn add bulma
  it outputs
  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.
  let’s create an Header component:
  Rename
  App.css into
  Header.css. Then edit
  Header.css, we will avoid being see sick with the infinite loop animation and place the center text in the header only. The header will be a header not whole view port page.
  Create
  ./src/Header.js file:
  Edit
  ./src/index.js, adding
  import 'bulma/css/bulma.css';
  after
  import './index.css';
  now edit
  App.js, we first use the
  Header Component and then we prepare 2 columns.
  Now add packages dependencies like the opencage API client, LeafletJS, and classnames:
  $ yarn add opencage-api-client leaflet classnames
  - opencage-api-client is the client library for Opencage Geocoder API
  - LeafletJS is the well-known web mapping API
  - classnames is a javascript utility lib to help build className attributes
  We can start the dev server with
  $ yarn start
  For now the app looks like this
  In the first column we will set up the form with the search input parameters. In the second column, we will have the results as multiple tabs, starting with the readable results (formatted address and coordinates), and a second tab with the raw JSON result from the API. As you can see in the following design, we will create two main components and
  GeocodingFormand
  GeocodingResults
  Create a file
  ./src/GeocodingForm.js
  Then create a file
  ./src/GeocodingResults.js
  We need to create files
  ./src/ResultList.js and
  ./src/ResultJSON.js
  To finish the first part, wire the application with those two main components (GeocodingForm and GeocodingResults)
  Edit the
  ./src/App.js file, first the imports:
  now add a constructor
  the App handles input text changes and the submit.
  So first add the
  handleChange method
  Followed by the
  handleSubmit method
  Last touch for this first part, we add the main components in the
  render method:
  Here is what the app now looks like
  Second part
  In this part we will add a map tab in the result section.
  First let’s create a
  ./src/ResultMap.js file :
  Download the pin icon from marker-icon-red.png and save it to
  public/ folder.
  As the map needs a height, we create a
  ./src/ResultMap.css file :
  Back in
  ./src/GeocodingResuls.js add the tab in the
  ul section
  and with the other results content add the map:
  The app now contains a map
  I really hope this was helpful for you. If it was, please, do let me know so that I can write more posts like this. You can always reach me out on Twitter and again if you followed this tutorial along till the end, I am really proud of you guys.
  Resources
  - Opencage Data Geocoder: 
  - Source code repository on github : 
  - Demo version on netlify : 