react basics (DOM, class-based, function with hooks)

1-dom-counter.js

// vanilla DOM approach: you manage state (externally) and updating the DOM manually

// state must be managed externally in a variable
const state = { count: 0 };

const counterDiv = document.createElement("div");

const counterSpan = document.createElement("span");
counterSpan.textContent = `The count is: ${state.count}`;

const incrementButton = document.createElement("button");
incrementButton.innerText = "click to increment";
incrementButton.addEventListener("click", () => {
  state.count++;
  console.log(state);
  // you must manage reactivity imperatively
  counterSpan.textContent = `The count is: ${state.count}`;
});

counterDiv.appendChild(counterSpan);
counterDiv.appendChild(incrementButton);
document.body.prepend(counterDiv);

2-class-counter.js

// you ALWAYS need to import React for the file to be parsed with React (JSX) syntax properly
// for class-based components you must import the Component class so your component can extend (inherit from) it
import React, { Component } from "react";

// class-based components are an older approach to React but are still accepted (and common to come across in codebases before 2019 release of hooks)
// any code running React v16.7 or less will use class-based components if the component has its own state

// React class based approach:
// you manage state as an instance field called "state"
// and utilize the setState method (inherited from React.Component) to update that state
// ANY changes to state will automatically cause the component to "react" to this change and re-render itself
// thanks to the react virtual-DOM (vDOM) these re-renders are done surgically and only effect the components that have had a change in state (or props as we will see)

class Counter extends Component {
  // any time that the state changes
  // the component will be re-rendered automatically
  // it REACTS to changes in state (and props which we will cover next)
  state = { count: 0 };

  render() {
    return (
      <div>
        The count is: {this.state.count}
        <button
          onClick={() =>
            // use the setState callback to ensure you always get the current state
            // because state is updated asynchronously (batched)
            // this is done by React to improve performance because changes to state cause a re-rendering of the component
            this.setState((currentState) => {
              // in the setState callback you return the changed state from the callback function
              return { count: currentState.count + 1 };
            })
          }
        >
          click to increment
        </button>
      </div>
    );
  }
}

3-function-counter.js

// you ALWAYS need to import React for the file to be parsed with React (JSX) syntax properly
// for function-based components you must import the useState hook function to manage component state
import React, { useState } from "react";

// React is moving towards a purely functional approach with the introduction of hooks in early 2019 (React v16.8+)

// React functional + hooks approach:
// we still gain all of the benefits of reactivity
// but now we hold state using the "useState" hook which provides the value and a setter for state
// the major difference is that the setter will REPLACE that piece of state entirely rather than merging it
const Counter = () => {
  // useState signature: useState(initialValueOfState) -> [currentValueOfState, stateSetterFunction]
  // the argument to useState is the initial value of that piece of state
  // it can be any value relative to the state you are trying to manage
  // (a value of 0 for a numeric count state here)
  const [count, setCount] = useState(0);
  // count: is the CURRENT value of the piece of state
  // setCount: is similar to setState but it will REPLACE the value
  // just like setState it will cause the component to re-render (react) to this change

  return (
    <div>
      The count is: {count}
      <button onClick={() => setCount(count + 1)}>click to increment</button>
    </div>
  );
};

4-rendering.js

// rendering is accomplished by writing the Component in JSX syntax (like any other HTML element)
import React from 'react';
// import the component from another module
import Counter from './Counter'; // <-- replace with the file name of the module of course

// all components can only render a single top-level element
// that element can thhen have any number of children inside of it
// this is due to the DOM behaving as a tree-like structure of parent and child elements
// typically you have a top-level <div></div> or a React fragment <></>
const App = () => (
  <div>
    {/* comments within the JSX must be written within curly-braces, because ANY JS syntax within JSX must be in curlies */}
    {/* a self-closing syntax can be used when the component has no children */}
    <Counter />
    {/* or standard open-close syntax is acceptable too, with or without inner children  */}
    <Counter></Counter>
  </div>
);