React DOM | React Elements JSX

2 min readNov 4, 2020

React is defined as a Javascript library for building user interfaces.React work with DOM. DOM is “Document Object Model”The DOM API can be used to change a document structure, style, and content.

If someone asked you to give one reason why React is worth learning, this outcomes-based UI language is it. I call this language “the React language”.

JSX In Depth

JSX stands for JavaScript XML

React.createElement(component, props, ...children)

we write code in JSX :

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

and it works on compile like:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Component in JSX

User-Defined Components Must Be Capitalized

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

Props in JSX

You can pass any JavaScript expression as a prop, by surrounding it with {}.

If we already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” operator to pass the whole props object. These two components are equivalent:

Children in JSX

The middle of the opening and the closing tag has children props.<MyComponent>foo</MyComponent>

JavaScript Expressions as Children

You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:<MyComponent>{'foo'}</MyComponent>

Ignore in children

Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

React and others

React not a framework it just a library.
React is easy to mix with another dependency.