React another Angle

React – because it’s more of a programming runtime

website

JSX is a syntax extension for JavaScript.

w3c

JSX stands for JavaScript XML. JSX allows us to write HTML in React.

JSX needs to React Runtime as a Fiber Tree.

// JSX is the syntactic sugar used to describe these objects.
// <dialog>
// 
// 
// </dialog>
{
  type: 'dialog'.props: {
    children: [{
      type: 'button'.props: { className: 'blue'}}, {type: 'button'.props: { className: 'red'}}}}]Copy the code

process

JSX -> Fiber Tree (React)– > DOM Tree (DOM object browser)– > Browser Rendering (GUI)

Fiber Tree process

Babel —->React. CreateElement –>React. CreateElement returns the object –> Fiber Tree