Your First Component
Your first component is like drawing your first LEGO brick before you learn to build a whole castle out of them.
In this page:
Syntax
function ComponentName() {
return <element>content</element>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<ComponentName />);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>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- 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.
Chapter Summary
- 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.
Browser Support
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: