Write a JavaScript function that returns JSX, and give it a name that starts with a capital letter. React calls it with a props object, and you use it in JSX like an HTML tag, such as <Welcome name="Sara" />.
There are two main ways to write one:
A function component, the recommended way. You can declare it with the function keyword or as an arrow function.
A class component, which extends React.Component and returns JSX from render(). It's the older style, and React still supports it.
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Or using arrow function
const Welcome = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
Saved in this browser - sign in to keep your review list.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Keep going - a few more words and AI can grade it.
Interview lens
How interviewers actually use this question
Likely follow-ups
Why does a component name have to start with a capital letter?JSX reads lowercase tags as built-in HTML elements and capitalized tags as variables in scope, so a lowercase name never reaches your function.
How are props different from state?Props come from the parent and are read-only. State belongs to the component, and updating it triggers a re-render.
Is there anything a class component can still do that a function component can't?Name error boundaries and the class lifecycle methods they need, since no hook replaces them.
What you can say
A React component is a JavaScript function that returns JSX, and its name starts with a capital letter.
React calls that function with one props object, so for <Welcome name="Sara" /> the function gets props.name set to Sara.
I use it in JSX like an HTML tag, and I can declare the function with the function keyword or as an arrow function. Either works.
The older way is a class component that extends React.Component, returns JSX from render(), and reads props from this.props.
For new code I write function components, since that's what React recommends. Class components still work, so I mostly see them in older codebases.
Weak answers to avoid
Leads with class components as the defaultReact still supports classes, but it recommends function components. Lead with a function that returns JSX and call classes the older style.
Lowercase component nameJSX treats <welcome /> as an HTML tag, so your component never renders. Say the capital-letter rule out loud and show it in the example.
Calls the component as a plain functionWriting Welcome(props) instead of <Welcome /> means React doesn't treat it as its own component, and its hooks attach to the parent. Render it as a JSX tag.
Shows syntax but never mentions propsInterviewers want to hear how data gets in. Say React passes one props object and use a prop in your example.
Interview lens
Likely follow-ups, what you can say, and the weak answers to avoid.
