React - Function Component
Table of Contents
About
This page is about the writing of component with the functional syntax
Syntax
A React component function is:
Native
In Native Javascript, with Create element
let Welcome = function(props){
return React.createElement( 'h1', null. 'Hello, ', props.name )
};
let WelcomeFunctionComponent = React.createElement(Welcome, props);
Jsx
let Welcome = function(props) {
return <h1>Hello, {props.name}</h1>;
}
let WelcomeFunctionComponent = <Welcome/>
Example
In Jsx
- A UD DOM component defining the Welcome tag
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- A React element using this DOM tag
const element = <Welcome name="Sarah Connor" />;
- Rendering
ReactDOM.render(
element,
document.getElementById('root')
);
- The standard mandatory “root” DOM node (placeholder for React DOM manipulation)
<div id="root"></div>
- Output: