Slide 16.12: React components and properties

React Components and Properties

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

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

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

1class Welcome extends React.Component {
2  render( ) { return( <h3>Hello React!</h3> ); }
3}
4ReactDOM.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:

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

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

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