Function Components
In this page:
function ComponentName(props) {
return <element>{props.propName}</element>;
}
<ComponentName propName="value" />Writing a Basic Function Component
A function component is just a JavaScript function whose name starts with a capital letter and which returns JSX. React calls this function whenever it needs to know what to display. This is the simplest possible building block in React.
Example: Writing a Basic Function Component
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Welcome() {
return <h1>Welcome to React!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
</script>
</body>
</html>Returning JSX from a Function
The JSX returned by a function component describes what should appear on the page, but it is not real HTML -- it gets converted into function calls behind the scenes.
Multi-line JSX needs to be wrapped in parentheses immediately after return so JavaScript doesn't insert an invisible semicolon.
return to avoid accidental blank returns.return on its own line with the JSX starting on the next line, unwrapped, causes JavaScript to return undefined.Example: Returning JSX from a Function
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Profile() {
return (
<div>
<h2>Jane Doe</h2>
<p>Frontend Developer</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Profile />);
</script>
</body>
</html>Calling a Component Like an Element
Once defined, a function component is used in JSX just like a built-in HTML tag, but with a capital letter and angle brackets: <Welcome />.
React sees this and calls your function to figure out what to render there, then does the same for every other component it finds.
Welcome() instead of <Welcome /> skips React's rendering process and can cause bugs.Example: Calling a Component Like an Element
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting() {
return <p>Hello there!</p>;
}
function App() {
return (
<div>
<Greeting />
<Greeting />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Forgetting to capitalize the component's name, causing React to treat it as an HTML tag instead of a component.
- Forgetting to
returnthe JSX from the function, resulting in nothing being rendered. - Adding a semicolon or other code between
returnand the opening parenthesis of multi-line JSX, breaking automatic semicolon insertion.
- A function component is a plain JavaScript function that returns JSX.
- It is the standard, modern way to write React components.
- Function components can accept a single
propsargument. - They are simpler and more concise than class components for most use cases.
Function components with Hooks require React 16.8+; without Hooks they work in any React version.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: