About
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.
Example
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
);
}
- A counter component with a useState hook to show how to call function
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"});
- Result:
Return
A component return always a fragment (ie elements in a container).
Type
The elements returned may be of two types:
- an React HTML element : html built-in element.
- an React Component element - Custom User defined element
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)
});
Feature
Immutable
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.
Property
Attribute
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.
Attribute value
Concatenate in Jsx Example:
<g transform={"translate("+margin.left+",0)"} />
Management
Create
With Native Javascript
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:
- type is the html element name or a function/class component
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'
}
};
With Jsx
jsx is a language that compiles to elements via a transpiler generally babel.
When writing JSX, you are creating elements.