How to Build Your First React Component
A step-by-step guide to writing a functional component and rendering JSX.
Initialize the Component Function
Create a standard JavaScript function. The function name MUST start with a capital letter (e.g., function UserCard()). If you use a lowercase letter, React will mistake it for a standard HTML tag.
Return the UI Structure
Inside the function, write a 'return' statement. You will return JSX, which looks like HTML but lives inside JavaScript.
Wrap in a Single Parent
Ensure your JSX returns only one top-level parent element. You cannot return two sibling <div> tags. Wrap them in a single <div> or an empty React Fragment (<>...</>).
Close All Tags
Unlike HTML, JSX is strict. Every single tag must be closed. For example, replace <img> with <img /> and <input> with <input />.
Apply CSS Classes
Use the 'className' attribute instead of 'class' to apply CSS. For example: <div className='container'>, because 'class' is a reserved keyword in JavaScript.
Accept Props
Add 'props' as a parameter to your function. This allows the component to receive data from its parent. Destructure the props for cleaner code: function UserCard({ name, age })
Inject Dynamic Data
Use curly braces {} to inject JavaScript variables directly into the JSX. For example: <h1>Hello, {name}!</h1>.
Export the Component
At the bottom of your file, use 'export default UserCard;' so that other files in your application can import and render this component.
Ready to master this completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
