A component is a user-defined react element in the React tree.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They:
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. See Conditional rendering
Functional vs Class
A valid React component:
The two below syntax's are equivalent:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Feature available only to function:
class Welcome extends React.Component {
// Optional. Needed to set state
constructor(props) {
super(props); // Always call the base constructor with props.
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Feature only available to class
see Tree
Element are created generally from a JSX expression that compiles to the Element function.
Note that the jsx function element above is equivalent in Native javascript to:
function Welcome(props) {
return React.createElement('h1',{}, `Hello, ${props.name}`);
}
where the createElement function permits to create React element (node in the virtual dom tree).
A good rule of thumb is that if a part of your UI:
it is a good candidate to be a reusable component.
Documentation of Component and creations testing framework are called Workbench. List of Workbench
Workbench:
Doc: