React Components and Properties

React Components
React components are JavaScript functions. The following script creates a React component named “Welcome” and a render method: 

function Welcome( ) {
  return <h3>Hello React!</h3>;
}
ReactDOM.render( <Welcome />, document.getElementById( 'root' ) );

React can also use ES6 classes to create components, for example: 

class Welcome extends React.Component {
  render( ) { return( <h3>Hello React!</h3> ); }
}
ReactDOM.render( <Welcome />, document.getElementById( 'root' ) );

React Component Properties
Props (properties) are arguments passed into React components (functions), and they are passed to components via HTML attributes. The following script creates a React component named “Welcome” with property arguments: 

function Welcome( props ) {
  return <h3>Hello { props.name }!</h3>;
}
ReactDOM.render( <Welcome name="John Doe" />, document.getElementById( 'root' ) );

React can also use ES6 classes to create components with arguments, for example, 

class Welcome extends React.Component {
  render( ) { return( <h3>Hello { this.props.name }</h3> ); }
}
ReactDOM.render( <Welcome name="John Doe" />, document.getElementById( 'root' ) );


     




      Never trust a preacher with more than two suits.    
      — Lenny Bruce on preachers