React

React is a UI JavaScript framework. It runs on the client and allows us to make reusable UI components with individual or shared state.

React uses a superset of JavaScript called JSX to handle it's components

JSX

JSX is just ES6 Javascript but also supports XML (HTML is based on XML)

This allows React to use HTML elements as objects and you can construct a React component using JSX

Example

import * as React from "react";
import { render } from "react-dom"
           
class ShoppingList extends React.Component {
  render() {
    return (
      <div classname="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

let baseDiv = document.querySelector("#root");

// Note the this.props.name.
// We can pass that prop during construction as below
// Props in react are just attributes on the element

// Below is the render function from react-dom
// It injects a react component into a component in the regular dom.
render(<shoppinglist name="Whatever"></shoppinglist>, baseDiv)
           

Note

The JSX isnt sent to the client. It's transpiled to normal JavaScript when you build the project.