React DOM | React Elements JSX

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 stands for JavaScript XML

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

we write code in JSX :

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

and it works on compile like:

{color: 'blue', shadowSize: 2},
'Click Me'

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.

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:

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

You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:

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 />






React not a framework it just a library.

React is easy to mix with another dependency.

I’m Md Nimur Hasan, a MERN Stack Developer. I know MongoDB, express, react, node js, and continue deep learning on these.