go to developers doc

Set up the React app structure

Create the React app that uses Woosmap Store Locator JS API to render stores on a map.
  1. Create your React App
  2. Available scripts

This tutorial is outdated and will be taken down shortly. To integrate Woosmap Map with React, please use the Woosmap Map JS library. You can refer to this code sample for guidance: React Map Basic.

Create your React App

To get started, use the Create React App package. It offers a modern build setup with no configuration. Running the following command will create your app structure with a package.json specifying the necessary scripts to build and run your app.

Shell
        npx create-react-app woosmap-store-locator

If you aim at integrating Woosmap in an existing project, you can go to step 3: Add External Woosmap JS API.

package.json

Here are the essentials parts of the package.json config file created by Create React App command:

JSON
        {
  "name": "woosmap-store-locator",
  "version": "0.1.0",
  "homepage": ".",
  "description": "Woosmap JS Store Locator API with React example starter project",
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

App Structure

The final project structure of this tutorial should look like this:

        woosmap-store-locator
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── index.html
└── src
    ├── components
        ├── InfoBox.css
        └── InfoBox.js
    ├── hooks
        └── useScript.js
    ├── App.css
    ├── App.js
    ├── config.json
    ├── index.css
    ├── index.js
    ├── Map.css
    └── Map.js

The initial project structure created with the previous command has been slightly modified to focus on the Woosmap part of the App.

For the project to build, these files must exist with exact filenames:

You can rename the other files.

Available scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Now let’s integrate Woosmap Store Locator JS API and play with your assets!