react.js

// note1: 
// React is declarative programming.
// vanilla javascript is imperative programming.
====================================================================================

// note2:
// JSX: javascript xml
// it means flavor of javascript that lookes alike html.
====================================================================================
// note3:
// this line of code in React:

        ReactDOM(<h1 className="header"> hi there </h1>, document.getElementById("root"));
         
// is equal to these lines of codes in vanilla javascript:

        const h1 = document.createElement("h1");
        h1.textNode = "hi there";
        h1.className = "header";
        docuemnt.getElementById("root").append(h1);
====================================================================================
// note4:
// JSX returns some sort of javascript object.
====================================================================================
note5:
One special thing about `ReactDOM.render()` is that it only updates DOM elements that have changed.
====================================================================================
note6: list of supported events in React
link: https://reactjs.org/docs/events.html#supported-events
===================================================================================
note7:
Note that in HTML, event listener names are written in all lowercase, such as onclick or onmouseover. 
In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.
====================================================================================
note8:
when a JSX element is compiled, it transforms into a React.createElement() call.
====================================================================================
note9:
Component class variable names must begin with capital letters!
sample:

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
====================================================================================
note10:
JSX elements can be either HTML-like, or component instances. 
JSX uses capitalization to distinguish between the two! 
That is the React-specific reason why component class names must begin with capital letters. 
In a JSX element, that capitalized first letter says, “I will be a component instance and not an HTML tag.”
====================================================================================