Introduction to React

An introduction to React is the same story told from the app root. There is usually an App component. It renders children. Those children render more children. That tree is your UI. The entry file mounts App onto a <div id="root"> in index.html with createRoot. If you cannot point to #root in the HTML, you do not yet know how the app starts.

Open a real Vite project once. src/main.jsx imports App. index.html has <div id="root"></div>. Browser loads the bundle, React paints App inside that div. That is the boot path. Interviewers ask this to see if you have actually run the starter, not only watched a video.

One-way data flow: parent passes props down. Child does not silently edit the parent’s data. If the child needs to ask for a change, it calls a function the parent passed — onSave, onToggle. Freshers try to ‘go up’ by mutating props. The screen does not update. That is the first trap.

Classroom: App renders Hello. Hello only knows the name it received. Draw App → Hello → <p>Hi Kabir</p> on paper. Virtual DOM, concurrent rendering, and Suspense wait until this tree is boringly clear. Don’t start an intro lecture with Fibre.

Where this shows up at work: every screen is still this tree. A dashboard is App → Sidebar + Main → cards. Same rule: props down, events up. If two cards share a filter, the filter state lives in the parent, not inside each card.

Learn next: JSX rules (className, one parent), then props, then useState. If introduction day ends with a working Hello name prop, the course is on track. If it ends with a Redux slide, the course is lost.

Introduction to React — on screen — Hi Kabir. App is parent. Hello is child. Data goes down as props.

Diagram

index.html  #root
      │ createRoot
      ▼
     App
      │
      ▼
    children

Exam tip

Root App + props down + callback up.

Example

// Introduction
function App() {
  return (
    <main>
      <Hello name="Kabir" />
    </main>
  );
}

function Hello({ name }) {
  return <p>Hi {name}</p>;
}

Introduction to React — on screen: Hi Kabir. App is parent. Hello is child. Data goes down as props.

Short notes

DefA React app is a component tree. App mounts on <div id="root"> via createRoot.
RuleProps go down. Events go up as callbacks. Child never mutates parent data.
Remembermain.jsx + index.html #root is how the first paint happens.
UseEvery real screen — shop, dashboard, admin — is still this same tree.
TrapMutating props to ‘update parent’. Or starting intro with Fibre / concurrent jargon.
ExApp → Hello({ name: "Kabir" }) → Hi Kabir. Draw that arrow on paper.
LearnRoot + tree first, then JSX, then props, then useState. Redux is not day one.

Introduction to React

Introduction to React — on screen — Hi Kabir. App is parent. Hello is child. Data goes down as props.

Diagram

index.html  #root
      │ createRoot
      ▼
     App
      │
      ▼
    children

Exam tip

Root App + props down + callback up.

Introduction to React

Example

Short notes

Questions

Introduction to React

Example

Short notes

Questions