React क्या है?

React एक toolkit है जो आपको छोटे reusable pieces से websites बनाने में help करता है, एक giant statue carve करने के बजाय LEGO blocks से बनाने जैसा।

In this page:

React किस Problem को Solve करता है
Declarative vs Imperative UI
Component-Based Architecture
React Code कहां Run होता है

React किस Problem को Solve करता है

document.getElementById और appendChild से हाथ से एक page update करना app बढ़ने के साथ जल्दी messy हो जाता है -- आपको exactly track करना पड़ता है कि कौन से DOM nodes मौजूद हैं और हर एक को manually बदलना पड़ता है।

React आपको यह describe करने देता है कि current data के लिए UI कैसा दिखना चाहिए, और React खुद पता लगाता है कि किन real DOM nodes को update करना है।

Note: एक React component को एक function की तरह सोचें जो data लेता है और UI return करता है -- वही data हमेशा वही UI produce करता है।

Warning: React एक UI library है, पूरा framework नहीं -- routing, state management, और API calls के लिए अलग tools चाहिए।

उदाहरण: What Problem React Solves

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Greeting() {
  return <h1>Hello, React!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);
  </script>
</body>
</html>

Declarative vs Imperative UI

Imperative code step-by-step DOM instructions देता है (यह element बनाओ, फिर इसे append करो, फिर इसका text set करो)। Declarative React code बस end result को JSX के रूप में describe करता है, और React असली DOM operations पीछे से handle करता है।

Note: JSX को 'अभी UI कैसा दिखना चाहिए' के रूप में पढ़ें, run करने वाले steps की एक sequence के रूप में नहीं।

Warning: DOM को directly बदलने के लिए एक React component के अंदर document.getElementById का सहारा लेना React के against जाता है -- React उस element का track खो सकता है।

उदाहरण: Declarative vs Imperative UI

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Message() {
  // Declarative: just describe the result.
  return <p>This paragraph was described, not built step-by-step.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Message />);
  </script>
</body>
</html>

Component-Based Architecture

React apps छोटे, reusable components के एक tree के रूप में बनाए जाते हैं, हर एक UI के एक piece के लिए responsible। एक page एक giant block of markup लिखने के बजाय components को combine करके assemble किया जाता है।

Note: हर component को एक clear responsibility दें ताकि यह reuse और test करना आसान रहे।

Warning: unrelated pieces of UI को एक component में भरना इसे बाद में reuse या समझना मुश्किल बना देता है।

उदाहरण: Component-Based Architecture

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Header() {
  return <h2>My Site</h2>;
}
function Footer() {
  return <p>&copy; 2024</p>;
}
function Page() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);
  </script>
</body>
</html>

React Code कहां Run होता है

React react-dom package के through browser DOM में render करने के लिए बनाया गया था, जो यह पूरा course उपयोग करता है। वही component concepts (components, props, state) React Native को mobile apps के लिए और Server Components को भी power करते हैं, लेकिन हर case में rendering target अलग है।

Note: इस course में सब कुछ react-dom को target करता है -- सीधे एक webpage में render करना।

Warning: React Native के लिए लिखा code अपने आप एक plain react-dom web app के साथ compatible नहीं है -- underlying host elements अलग हैं।

उदाहरण: Where React Code Runs

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Note() {
  return <p>Rendered into the browser DOM by react-dom.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Note />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

Next Lesson → Installing Node.js and npm

React क्या है?

React किस Problem को Solve करता है

Declarative vs Imperative UI

Component-Based Architecture

React Code कहां Run होता है

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code