This repo follows Turbo 360's YouTube tutorial React with Google Maps
As a note, the following instructions are not complete and may be out of date. Turbo 360's YouTube channel also features a new React tutorial using Google Maps, React & Google Maps Revisited
##Here are step-by-step instructions to make this simple react app that uses the google-maps api and the foursquare api to display a list of places and a map with markers of those places.
- Clone or download this repo
- run
npm installin the terminal - run 'webpack -w' in the terminal
- open
index.htmlin the browser
Create a new directory by running mkdir DIRECTORY-NAME in the terminal,
and cd into that directory by running cd DIRECTORY-NAME in the terminal.
Run npm init -y in the terminal to produce the package.json file, the -y option will create the package.json file with the default settings and will not prompt you to answer each question.
Create an index.html file and a webpack.config.js file. A configuration file in Webpack is basically a common.js module. The config file is a place to put all of your configuration, loaders, and other specific information relating to your build.
Install react. Run npm i -S react in the terminal, the -S is simply short-hand for --save and the i is short for install.
Instal react-DOM. Run npm i -S react-dom
Install webpack. Run npm i -D webpack in the terminal. The -D is short for --save-dev and will make the package appear in the devDependencies if your package.json.
Install babel-core. Run npm i -D babel-core in the terminal. This installs the Babel compiler itself, which transpiles the ES6 javascript into ES5 since not all browsers can understand the ES6 code.
Install babel-loader. Run npm i -D babel-loader in the terminal. With webpack, running your javaScript and JSX through Babel is a simple as adding a loaders entry for babel-loader to your webpack.config.js which we will create and set-up in a few step. Basically we will be telling Webpack to only apply Babel to files in a specific directory. This speeds up the build by making sure that Babel isn't applied to the entire node_modules directory.
Install babel-preset-react. Run npm i -D babel-preset-react in the terminal. The babel-preset-react is a plugin used by the babel-loader to translate JSX syntax.
Install babel-preset-es2015. Run npm i -D babel-preset-es2015 in the terminal. Like the babel-preset-react, this plugin will be used by the babel-loader to translate ES6 syntax.
Create the webpack.config.js file by running touch webpack.config.js in the terminal. On line 1 and 2 we use node's require method to load the webpack module from webpack and the path module from node which provides utilities for working with file and directory paths. The minimalist requirement of a Webpack config file is the presence of entry and output properties. On line 6 the entry property contains an app key who's value holds the directory path of the React applications codebase, the entry basically tells Babel where the javascript code we wrote lives to have it transpile into ES5. On line 10 the output property has a sourceMapFilename key who's value represents the directory path of the bundle file output, this is where we use webpack to specify where to tell Babel to put the transpiled code. On line 4 we uses node's module.exports which will contain properties for the webpack configuration. for more information webpack configuration
Create a src directory, cd into that directory and create an app.js file inside the src directory by running the folling commands into the terminal mkdir src cd src touch app.js
Set up the app.js file.
Run web pack -w in the terminal, which stands for web pack watch, which will watch for all changes and automatically retranspile your code. This will generate the build folder and bundle.js and bundle.map files, which are the transpiled code.
Set up the index.html file to render. Now if you open index.html in the browser you will see the text This is a REACT APP! displayed on the screen.
Go into the src directory, and make a new directory named components cd into this directory and make two files, one named Maps.js and another named Places.js.
Now lets do a basic set up for the Map component, and import this component in the app.js file with this line of code: import Map from './components/Map'
Now that we have the Map component all set up, we can utilize the Map component in the app.js. If you open the index.html file in the browser and you will see some text rendered from he Map component.
Create a simple Places component, export and import this module in the app.js and adding it to the render.
Install react-google-maps by running this line of code in the terminal, npm i -S react-google-maps and then add a script tag that uses your googleAPI key. For more information on react-google-maps. Here's a link to the Google Maps APIs docs, this is where you can get your api key.
In the maps component we can import some components from the react-google-maps library.
Next we need to create a container for the map. The style in the div just means that we want the map to be 100% of it's parent element.
style{{height: '100%', width: '100%'}}
In the map component lets add some code to render the google map, we pass down center as a prop, so we need to go back to our app.js and make sure that we create a center variable and pass it down to the Maps component via props.
In the app.js add another variable named markers, which is an array of objects, these will be the markers on the map. We also need to pass the Map component markers as a prop.
In the Maps.js file we access markers and create a local variable markers, and use the map function that will iterate over the markers property and pull the lat and lng for the google maps, we also return a Marker component that takes i as the unique identifier and it also takes marker which we just declared in the Map component. We add { marker } and on line 29 as a reference to marker on line 9, this is how the map will display the markers. In the return of const marker {...marker} is just ES6 short hand for passing in marker.
To make our API calls in react we will be using another external module named superagent. To install superagent enter this code into the terminal: npm i -S superagent
For more information on SuperAgent here's the link to their DOCS
Inside the parent component (which is the App component in app.js) and we want to override whats called the lifecycle component called componentDidMount, a lifecycle method is an action that gets fired by the system and not by the user. Here we just added a console.log to check if it is working. So if you open index.html in the browser and refresh you will see componentDidMount logged in the console.
###27.
Import Super Agent to make api calls, we import this in the app.js file with this line of code:
import superagent from 'superagent'
Click here for more information SuperAgent.
