This page is about the writing of a component with the functional syntax
In Jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sarah Connor" />;
ReactDOM.render(
element,
document.getElementById('root')
);
<div id="root"></div>
A React component function is:
In Native Javascript, with Create element
let Welcome = function(props){
return React.createElement( 'h1', null. 'Hello, ', props.name )
};
let WelcomeFunctionComponent = React.createElement(Welcome, props);
let Welcome = function(props) {
return <h1>Hello, {props.name}</h1>;
}
let WelcomeFunctionComponent = <Welcome/>
See:
If you get a problem where the ReactCurrentDispatcher is null followed by the rule of Hooks, There may be a possibility that you use a raw function and not a React component function.
To create a component from an exported function, use the React.createElement
Example: let's say:
you would use this code.
// create the root
const root = ReactDOM.createRoot(document.getElementById('root'));
// Note the React.createElement
let HelloWorldComponent = React.createElement(HelloWorld, {});
// Render
root.render(HelloWorldComponent);