React Basics — React Technical Interview Questions & Answers

React Basics

React Basics

  • React basics are a triangle: a component, props in, state inside. Item shows Price (prop amount) and a qty state. Click + → qty 2 → amount 98. If you can draw that on paper, you are past ‘hello world’.
  • Add lists+keys and one useEffect fetch later. Skip Redux until this triangle is boring.
  • On screen: ₹49 then + → ₹98. Price is props. qty is state. That triangle is ‘React basics’.
  index.html  #root
      │ createRoot
      ▼
     App
      │
      ▼
    children

Technical Interview Tip: Draw the triangle with a qty example.

Code Examples for React Basics

Example

// Basics
import { useState } from "react";

function Price({ amount }) {
  return <span>₹{amount}</span>;
}

export default function Item() {
  const [qty, setQty] = useState(1);
  return (
    <p>
      <Price amount={49 * qty} />
      <button onClick={() => setQty(qty + 1)}>+</button>
    </p>
  );
}

On screen: ₹49 then + → ₹98. Price is props. qty is state. That triangle is ‘React basics’.

How to Explain React Basics to an Interviewer

What three ideas are React basics?

Component Props State