Your First Component
In this page:
Writing a Function Component
A React component is just a JavaScript function whose name starts with a capital letter and that returns JSX describing what should appear on screen.
Note: Keep your very first component simple -- a single returned element is enough to get started.
Warning: A component function that starts with a lowercase letter (like welcome instead of Welcome) is treated by React as a plain HTML tag name, not a component -- and will fail.
Example: Writing a 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 your first component!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
</script>
</body>
</html>Rendering a Component to the Page
ReactDOM.createRoot(domNode).render(<Component />) is what actually puts your component's output into the real page, targeting a DOM element (commonly a div with id="root") that already exists in the HTML.
Note: The target element (id="root") must exist in the HTML before render() runs, or React has nowhere to mount into.
Warning: Calling .render() with a plain HTML string instead of JSX (like '<h1>Hi</h1>' as a string) will not render as an element -- it needs actual JSX syntax.
Example: Rendering a Component to the Page
<!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 FirstRender() {
return <p>This text appears because of ReactDOM.createRoot(...).render(...).</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<FirstRender />);
</script>
</body>
</html>Exporting a Component for Reuse
Adding export default in front of a component's function declaration lets other files import and use it, which is how components get shared across a real project.
Note: export default is the most common export style for a file with exactly one main component.
Warning: Forgetting to export a component means other files importing it will get undefined instead of the component.
Example: Exporting a Component for Reuse
<!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">
// Greeting.jsx
// export default Greeting;
function Greeting() {
return <h2>Hello from an exported component!</h2>;
}
// App.jsx
// import Greeting from './Greeting';
function App() {
return <Greeting />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Starting the component name with a lowercase letter, which makes React treat it as an HTML tag instead of a component.
- Forgetting to return JSX from the function -- a component that returns nothing renders nothing.
- Forgetting to actually render the component with ReactDOM into the page.
- A React component is just a JavaScript function that returns JSX.
- Component names must start with a capital letter (PascalCase).
- A component must
returnsomething to actually display content. ReactDOM.createRoot(...).render(<Component />)mounts a component onto the page.
React 18+ uses `ReactDOM.createRoot()`; earlier versions used `ReactDOM.render()` instead.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: