Function Components
In this page:
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.
Note: Keep your first components small and focused on one piece of UI, like a single message or button.
Warning: A component name starting with a lowercase letter will be treated as a plain HTML tag, not your component.
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.
Note: Wrap multi-line JSX in parentheses right after return to avoid accidental blank returns.
Warning: Putting 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.
Note: You can use the same component multiple times on a page just by writing its tag more than once.
Warning: Calling the function directly like 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: