[React]

ReactBasic.md

React Ref

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 0
    };
  }
  componentDidMount() {
    const { width, height } = this.r.getBoundingClientRect();
    this.setState({
      width,
      height
    });
  }
  render() {
    return (
      <div>
        <h2 ref={r => (this.r = r)}>
          {this.state.width} x {this.state.height}
        </h2>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

React Google Maps

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const map = {
  width: '100%',
  height: '100vh'
};

const AnyReactComponent = ({ text }) => <div>{ text }</div>;

export default class Map extends Component {
  constructor(props) {
    super(props)
    this.state = {
      center: { lat: 40.7446790, lng: -73.9485420 },
      zoom: 11
    }
  };

  componentDidMount(){
    
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        function(position) {
          console.log(position);

          this.setState({
            center: { lat: position.coords.latitude, lng: position.coords.longitude },
          })              
        }
      )
    }
  }

  render() {
    return (
      <div className='map' style={ map }>
        <GoogleMapReact
          bootstrapURLKeys={{ key: 'AIzaSyD3Gu9y1qJChfayVFglovKEY2xjgKBiCJA' }}
          defaultCenter={ this.state.center }
          defaultZoom={ this.state.zoom }>
          <AnyReactComponent
            lat={ 40.7473310 }
            lng={ -73.8517440 }
            text={ "Where's Waldo?" }
          />
        </GoogleMapReact>
      </div>
    )
  };
};