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>
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>
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)