React Components: Your UI Building Blocks
Think of React Components as custom, reusable HTML tags you create with JavaScript functions. Use them to build everything from buttons to page layouts, speeding up development.
Why it exists
Traditionally, web development kept content (HTML), style (CSS), and interactivity (JavaScript) in separate files. As web applications grew more complex and interactive, managing these separate pieces became difficult. React puts interactivity first by allowing you to build self-contained UI elements that bundle their logic and markup together.
The mental model
A React component is a JavaScript function that returns a piece of UI. Think of it as a factory for a specific part of your interface, like a button or a user profile card. You can then assemble these parts to build your entire application, just like using custom LEGO bricks to build a larger structure.
How it works
You define a component as a JavaScript function whose name starts with a capital letter. Inside this function, you return what looks like HTML but is actually a special syntax called JSX (JavaScript XML). This JSX describes the UI the component should render. To use a component, you "call" it within other JSX using an HTML-like tag, such as <MyComponent />. React then takes this description and renders the corresponding HTML to the browser.
When to use it
Use components for any piece of UI that is repeated, complex, or self-contained. This is the foundation of building React apps. Good candidates for components are buttons, form fields, navigation bars, user avatars, and even entire page layouts. Breaking your UI into components makes your code easier to read, test, reuse, and maintain.
When not to use it
While most of a React app is built from components, avoid premature abstraction. If a small, static piece of markup is used only once inside a single parent component, it might not need to be extracted into its own separate component file. Wait until it becomes more complex or you identify a need for reuse before breaking it out.
One canonical example
A basic Profile component is a JavaScript function that returns an image element. First, you define and export the function: export default function Profile() { ... }. The function name, Profile, must be capitalized. Inside, it returns a JSX element describing the UI: return <img src="https://react.dev/images/docs/scientists/MK3eW3Am.jpg" alt="Katherine Johnson" />. You can then use this component elsewhere in your app by writing <Profile />.
Interview question
What is the fundamental nature of a React Component?
- a.A custom, reusable HTML tag that simplifies web page structure.
- b.A class definition used to manage application-wide data and state.
- c.A separate file that holds all the styling rules for a specific UI element.
- d.A JavaScript function that returns a description of UI using JSX.Correct
Why? this is the answer
The card explicitly states, "A React component is a JavaScript function that returns a piece of UI" and that it returns "JSX" to describe the UI. While components are analogous to custom HTML tags, their core implementation is a JavaScript function.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles