JSX, Component, Element

JSX

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.

• JSX stands for JavaScript XML.
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React.

const myElement = <h1>I Love JSX!</h1>;

above is the way writing html in the form of jsx, and blow writing in the form of js.

const myElement = React.createElement("h1", {}, "I do not use JSX!");

Components

• Components in React.js are the building blocks of a React application.
• They are used to create reusable UI elements.
• Components can be either functional or class-based and can be nested to create more complex UI elements.
• Components accept inputs called props and manage their own state.
• Components are functions that take data or props as an input and return a tree of elements as output.
• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
• Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
• React Documentation
• React Component API Docs

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Element

• Elements are just plain javascript objects that offer a lightweight representation of the dom and let react update your user interface in a fast and predictable way.
• Elements are the smallest building blocks of React apps.Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

JSX to Element

const buttonTitle = 'Submit';

return(
  <button className={'button button-blue'}>
    <span>
      {buttonTitle}
    <span>
  </button>
)

above is the jsx formate and blow code is the transform into the Element.

{
  type: 'button',
  props:{
    className:'button button-blue',
    children:{
      type:'span',
      children:'Submit'
    }
  }
}