ernestlv

const Square = () => { // Root Functional Component
	let inputRef = React.useRef(null); // React Hook
   
   const click = () => { // 'this' points to window
   	alert(inputRef.current.value);
   }

  console.log("render square");
  
  // View

ernestlv

const Square = () => { // Root Functional Component
	let [show, setShowMe] = React.useState(false); // React Hook
   
   const click = () => { // 'this' points to window
   	setShowMe(!show);
   }

  console.log("render square");
  
  // View

ernestlv

const Square = () => { // Root Functional Component
	let listRef = React.useRef(null); // React Hook
   
   const click = () => { // 'this' points to window
   	var children = listRef.current.querySelectorAll('div');
      var domElement = children[2]; // third DOM element
   	alert(domElement.textContent);
   }

  console.log("render square");

ernestlv

const Square = () => { // Root Functional Component
	let listRef = React.useRef(null); // React Hook
   
   const click = (event) => { // event object - 'this' points to window
   	var domElement = event.target;
   	alert(domElement.textContent);
   }

  console.log("render square");

ernestlv

const Square = ( {text} ) => { // Root Functional Component

  console.log("render square:", text);
  
  // View
  return (
   <div style={{display:'table', backgroundColor:'blue'}}> 
      {
      	[1,2,3].map((key) => {
          return (

ernestlv

/*
 * A promise generator that queues tasks
 */
function initTaskGenerator() {
   function yieldPromise(task) { // executed in yield expression
     return new Promise((resolve, reject) => {
     	 try {
         setTimeout(() => {
         	var value = typeof task === "function" ? task() : task;
         	resolve(value);

ernestlv

/*
 * A generator is an iterator function whose body you can slice into many  parts by combining a yield / iterator.next() expression.
 */

function* iteratorFn(value) {
  //body does not execute until first iterator.next() is called
  console.log("before yield!", value); // execute first iterator body slice
  value = yield yieldFn(value); // stop execution & returns iterator value - resumes execution, after second iterator.next() is called & updates value from arg in iterator.next( arg )
  console.log("after yield:", value); // execute second iterator body slice
  return "I am done!" + value + "second part"; // stops execution & returns final iterator value

ernestlv

import { useState } from 'react'; // hook

const Root = () => { // functional component
  const [ state, setState ] = useState(0); // local state for Root component
  const click = () => {
    setState( state + 1 ); // re-render Main component
  }

  console.log("render Main:", state);
  return ( // jsx

ernestlv

import React from 'react';

interface SectionalProps {
  title:string;
  list:Array<{key:string, value:string}>;
  onClick:( value: string ) => void;
}

export const Sectional:React.FC<SectionalProps> = ( { tile, list, onClick } ) => { //props is passed by react as an object

ernestlv

const Main = () => {

  useEffect(() => { // runs after Main component is rendered
     async function init() {
      console.log('fetching suggestions ...');
      let response;

      try {
        response = await fetch('https://pokeapi.co/api/v2/pokemon/');
        response = await response.json();