Creating a Map with React

In this lesson, you'll learn how to create a React component for displaying an interactive map. Follow these steps to set up and render the component:

---

Step 1: Setting Up Your Starter Files

1. Begin with the provided starter files. Ensure you have React and ReactDOM installed as dependencies in your package.json file.
2. Run npm install in your terminal to install all required modules.

---

Step 2: Creating the Map Component

1. Create a new folder named components inside your src directory.
2. Inside components, create a new file named Map.js.
3. Write the following code to define your React class:

import React from 'react';

export default class Map extends React.Component {
  render() {
    return (
      <img 
        src="https://upload.wikimedia.org/wikipedia/commons/e/e3/World_map_blank_without_borders.svg" 
        alt="Map" 
        style={{ width: '100%' }} 
      />
    );
  }
}

---

Step 3: Rendering the Map Component

1. Open your client.js file (or the entry point for your React app).
2. Import React, ReactDOM, and the Map component:

import React from 'react';
import ReactDOM from 'react-dom';
import Map from './components/Map';

3. Render the Map component into the div with the ID react:

ReactDOM.render(<Map />, document.getElementById('react'));

---

Step 4: Test Your Component

1. Save all files and start your development server (npm start).
2. Open your browser and navigate to http://localhost:3000.
3. Verify that a map image is displayed on the page.

---

Key Concepts Covered

• React Component Structure: You learned how to create a reusable React component using ES6 classes.
• JSX Syntax: Integrated JSX to render an HTML-like structure in React.
• Rendering Components: Used ReactDOM.render to attach the Map component to the DOM.

In the next lesson, you’ll learn how to make this map interactive by capturing and calculating click events on it.

Explore more in the full course here: Mastering ReactJS: Data Visualization