Theory Explanation

React is an open-source JavaScript library for building user interfaces. It lets you describe the UI as a tree of reusable components, then updates only the parts that change so interfaces stay predictable and efficient.

React apps are built from components. A component can be tiny, like a button, or large, like an entire dashboard screen. The important idea is that every component describes how its UI should look for a given set of props and state.

The Vite setup from the source document is the fastest beginner path: create the app, install dependencies, run the dev server, then edit App.jsx and component files under src.

Code Example

React

// App.jsx
function WelcomeCard({ name }) {
  return (
    <section className="card">
      <h1>Welcome, {name}</h1>
      <p>Start learning React one component at a time.</p>
    </section>
  );
}

export default function App() {
  return <WelcomeCard name="Rishi" />;
}

Key Points

React was developed by Meta and is used for web and native interfaces.
Components combine markup, logic, and state into reusable UI pieces.
Data usually flows down from parent components to child components through props.

Code Notes

Components are plain JavaScript functions that return JSX.
Props pass data from the parent App component into WelcomeCard.
The component can be reused with a different name prop.

Practice Task

Create a Vite React app, run it locally, and replace the starter screen with your own profile component.

How To Study This

Read the theory first, type the component by hand, run it locally, then change one prop or state update and predict the UI. That habit builds real React fluency.