How to use javascript code as react syntax one?

Question

I use OpenLayers API Map in my project. I have no idea what is the correct way to use js code in react or vice verca?

Here is answer how to user markers in map, but I can't use it in my current code as I don't understand react sytax as well. Here is my code example with empty map.

    import React, { Component } from 'react';
    import { Map, layer, Layers } from 'react-openlayers';
    import { Container } from 'react-bootstrap';
    import { transform } from 'ol/proj';
    import '../../styles/openlayers-map.css';

    class OpenlayersMap extends Component {
      render() {
        return (
          <Container className="map-container">
            <Map view={{
              center: transform([30, 50],
                'EPSG:4326', 'EPSG:3857'),
              zoom: 12,
              maxZoom: 18,
              minZoom: 4,
            }}
            >
          <Layers>
            <layer.Tile />
          </Layers>
        </Map>
      </Container>
    );
  }
}

export default OpenlayersMap;

There is a sample of working js code provided Here. I will really appreciate for any help to use this code for my purpose

Answer 1

react is just a library that handles when DOM nodes get updated, the rest is plain javascript. So, when working with react, the 3 most common things you touch that are react-specific are:

1. react lifecycle methods (render, componentDidMount, etc...)
2. JSX - this just allows you to write html-like elements and under the hood it's transformed into function calls; React.createElement.
3. props and state - this controls when your component needs to re-render and update the UI

therefore, outside the JSX elements, you can do any javascript you want:

class MyComponent extends React.Component {
  // 1
  state = {
    mountOffset: 0,
  };

  // 2
  componentDidMount() {
    // 3
    this.initMountOffsetInterval();
  }

  // 4
  initMountOffsetInterval() {
    // 5
    setInterval(() => {
      // 6
      const mountOffset = this.state.mountOffset + 1;
      // 7
      this.setState({ mountOffset });
    }, 1000);
  }

  // 8
  render() {
    // 9
    const { mountOffset } = this.state;

    // 10
    return (
      <h1> 
        This component has been mounted for: { mountOffset } seconds
      </h1>
    );
  }
}

let's break down the example above; theres a mix of plain javascript and react-specific code:

1. state is just a plain javascript object
2. *componentDidMount is a react-specific lifecycle method - nothing special here, this just runs when the component mounts
3. plain js instance method call
4. plain js class instance method, you can make as many as you want
5. setInterval is just a plain javascript interval function that we all know
6. plain javascript object destructuring assignment
7. *setState is a react-specific function, it allows us to update the component's state so the component can re-render
8. *render is a react-specific lifecycle method - it tells the react library what html should be rendered from the component
9. plain javascript object destructuring assignment
10. returns the html markup that this component should render