This post was previously published on Medium
This tutorial is not about setting up a build environment for React, so for the easy use, we will use create-react-app.
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 ├─ email@example.com ├─ firstname.lastname@example.org └─ email@example.com info All dependencies ├─ firstname.lastname@example.org ├─ email@example.com ├─ firstname.lastname@example.org ├─ email@example.com ├─ firstname.lastname@example.org ├─ email@example.com ├─ firstname.lastname@example.org ├─ email@example.com ├─ firstname.lastname@example.org ├─ email@example.com └─ firstname.lastname@example.org ✨ 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!
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 http://localhost:3000.
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
Open your IDE or Text Editor with the folder
Edit the file
import logo from './logo.svg';
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.
CTRL + C to stop the development server.
We will now add dependencies to the project.
$ 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 ├─ email@example.com ├─ firstname.lastname@example.org └─ email@example.com info All dependencies ├─ firstname.lastname@example.org ├─ email@example.com └─ firstname.lastname@example.org ✨ Done in 8.61s.
let’s create an Header component:
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.
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
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
Create a file
Then create a file
We need to create files
To finish the first part, wire the application with those two main components (GeocodingForm and GeocodingResults)
./src/App.js file, first the imports:
now add a constructor
the App handles input text changes and the submit.
So first add the
Followed by the
Last touch for this first part, we add the main components in the
Here is what the app now looks like
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
As the map needs a height, we create a
./src/ResultMap.css file :
./src/GeocodingResuls.js add the tab in the
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.