Components & props
Components & Props
Components, conceptually similar to JavaScript functions. It accepts arbitrary input parameters (ie "props") and returns React elements that describe the content displayed on the page.
Function component and class component
Function component
function Welcome(props) {
return <h1>Hello, {
props.name}</h1>;
}
class component
class Welcome extends React.Component {
render() {
return <h1>Hello, {
this.props.name}</h1>;
}
}
Rendering component
Previously, the React elements we encountered were just DOM tags.
However, React elements can also be user-defined components.
When React elements are user-defined components, it will use the attributes and subcomponents received by JSX. (Children) are converted to a single object and passed to the component. This object is called "props".
function Welcome(props) {
return <h1>Hello, {
props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);