An element is a node in the React tree (React DOM implementation) that has a type and props.
A component is a user-defined element.
If you don't have any knowledge of React, check the getting started first.
Elements are created with the createElement function of the React library (If you are using jsx files, when they are compiled, they generate code with the createElement function).
We create an alias/wrapper function called e around it to make the next code more concise.
var e = function(type, props = [], ...children){
return React.createElement(
type, // type is the string equivalent of the HTML tag (ie h1, div, ...) or the function/class component
props, // props are the equivalent of HTML attributes
children // children are other react element or a string for a text node
);
}
function Counter(props) {
const [count, setCount] = React.useState(0); // state
let updateCounter = function(){ setCount(count + 1) };
return e(
'div', // the type of element (div)
{'className': 'container'}, // its properties
e('h1', { className: 'H1'}, 'Welcome ', props.name), // first h1 child with two children text nodes
e('p', null, 'A simple counter application'), // second p child
e('p', null, "Counter: ", count), // third p child with two text nodes
e(
'button', // a button
{ onClick: updateCounter}, // on click call the function updateCounter
'Increment'
)
);
};
// Wrapping it to be able to use the state
let App = e(Counter, {name: "Foo"});
A component return always a fragment (ie elements in a container).
The elements returned may be of two types:
How to list the type name (ie h1, h2, …)?
React.Children.map(children, (child) => {
if(!React.isValidElement(child)) {
return;
}
const type = (child as ReactElement).type;
console.log(type.name)
});
React elements are immutable.
Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
All DOM properties and attributes (including event handlers) should have a camelCased name
For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased.
Concatenate in Jsx Example:
<g transform={"translate("+margin.left+",0)"} />
The only element that you needs to create inside React is a component. html react element are built-in element.
The React.createElement() function 1) is the basic block to create element/component.
React.createElement(
type, /* The html name or the function/class component */
[props],
[...children]
)
where:
React.createElement() performs a few checks to help write bug-free code but essentially it creates from
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
an object like this:
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
jsx is a language that compiles to elements via a transpiler generally babel.
When writing JSX, you are creating elements.