understanding google-maps-react library

Question

I came across this post to integrate google-map with react
It uses this library
As we can see on the library page, it explains we can use
import { GoogleApiWrapper } from google-maps-react

Now in order to be a better js developer, I wish to understand how to understand this api directly from library

So I want to understand how to corroborate as well as not only this library, how do we move ahead with understanding the any library we want to use in our react-project primarily.

All help is very much appreciated, it will help all fellow developer take a leap in their skill!!!

Answer 1

When trying to find out what is going on in a js library, always check the index.js file.

For example, in google-maps-react you'll find in root/index.js, this line

export {wrapper as GoogleApiWrapper} from './GoogleApiComponent';

Inside the GoogleApiComponent.js file you'll find that it has wrapper as a named export as well as the default export of the file.

EDIT:

In most libraries (as well as projects) you will find this standard where people define many modules in a folder and then export them from a single index.js file.

This is because with the import-export syntax of JS if you have a folder structure of

root
|-> a.js
|-> b
    |-> c.js
    |-> d.js
    |-> index.js

then you can import straight from the folder 'b', by using the index.js in the folder to define what exports are to come from b.

A sample index.js will look something like this

export * from './foo';
export {default as bar} from 'bar';
export {baz} from 'baz';