Section 25: JavaScript Frameworks - Focusing On What Matters

The goals

💪🏻What is a "Framework"?

✌🏻Example: React.js

 

import React, { useEffect, useRef } from 'react';

import './SelectedPlace.css';

const SelectedPlace = props => {
  const { centerCoords, fallbackText } = props;
  const mapEl = useRef();

  useEffect(() => {
    if (centerCoords) {
      const map = new window.google.maps.Map(mapEl.current, {
        center: centerCoords,
        zoom: 16
      });

      new window.google.maps.Marker({
        position: centerCoords,
        map: map
      });
    }
  }, [centerCoords]);

  return (
    <section id="selected-place">
      <div ref={mapEl}>{!centerCoords && <p>{fallbackText}</p>}</div>
    </section>
  );
};

export default SelectedPlace;

Change our code into react code.

 

 

 

Sources

https://academind.com/tutorials/angular-vs-react-vs-vue-my-thoughts

Angular vs React vs Vue - My Thoughts