React - Function Component

This page is about the writing of component with the functional syntax

A React component function is:

• a Javascript function
• wrapped as a element
• that returns a element

In Native Javascript, with Create element

let Welcome = function(props){
  return React.createElement( 'h1', null. 'Hello, ', props.name )
};
let WelcomeFunctionComponent = React.createElement(Welcome, props);

React - JSX

let Welcome = function(props) {
  return <h1>Hello, {props.name}</h1>;
}
let WelcomeFunctionComponent = <Welcome/>

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:

See React - List of element (Component, )

See:

• React Function Component - Lifecycle