Note: Component is the most important concept in React.
What are the Components?
Components are the building block of any React application and a typical React application is made up of these components. Simply putting, a component is like JavaScript function or class that takes optional inputs called props and returns a React element.
What is Props?
A React Component takes an optional input called props and returns a React Element.
A React Component can be created in two ways. You can use either a class* or a function. A Function Component is also called functional component.
Note: In this tutorial, we will focus on functional Component.
Note: The component name must be in CAPITAL LETTER otherwise it will give an error.
JSX Code:
// functional component
function Message() {
return <h1>hello, world</h1>;
}
In the code given below, we created a functional component called Message and to use this functional component, use the similar syntax as normal HTML <Message />
JSX Code:
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
// functional component
function Message() {
return <h1>hello, world</h1>;
}
ReactDOM.render(<Message />, rootElement);
</script>
</body>
Output:
In the code given below, we pass the message attribute as property to the Message component and to access the message property we use the syntax props.msg because props are an Object.
JSX Code:
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
// functional component with props
function Message(props) {
return <h1>{props.message}</h1>;
}
ReactDOM.render(<Message message="Hello, World" />, rootElement);
</script>
</body>
Output:
In the code give below, we wrap the HelloWorld component inside the Message component and to access the children of the Message component we used props.children syntax because props are an Object. You can wrap one or more components inside another component.
JSX Code:
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
// functional component with props
function Message(props) {
return <h1>{props.children}</h1>;
}
// functional component without props
function HelloWorld() {
return <span>Hello, World</span>;
}
const element = (
<Message>
<HelloWorld />
</Message>
);
ReactDOM.render(element, rootElement);
</script>
</body>
In the code given below, we pass the HelloWorld component as an expression in the Message component using the children attribute.
JSX Code:
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
// functional component with props
function Message(props) {
return <h1>{props.children}</h1>;
}
function HelloWorld() {
return <span>Hello, World</span>;
}
ReactDOM.render(<Message children={<HelloWorld />} />, rootElement);
</script>
</body>
Top comments (0)