प्रतिक्रिया प्रारंभ करना

❮ पहले का अगला ❯

उत्पादन में प्रतिक्रिया का उपयोग करने के लिए, आपको npm की आवश्यकता है जो Node.js के साथ शामिल है ।

रिएक्ट क्या है इसका एक सिंहावलोकन प्राप्त करने के लिए, आप सीधे HTML में रिएक्ट कोड लिख सकते हैं।

लेकिन उत्पादन में प्रतिक्रिया का उपयोग करने के लिए, आपको npm और Node.js स्थापित करने की आवश्यकता है।

HTML में सीधे प्रतिक्रिया करें

रिएक्ट सीखना शुरू करने का सबसे तेज़ तरीका है कि आप सीधे अपनी एचटीएमएल फाइलों में रिएक्ट लिखें।

W3Schools रिक्त स्थान

HTML फ़ाइलें बनाने के साथ आरंभ करने का सबसे आसान तरीका W3Schools Spaces है!

यह अपने काम को दूसरों के साथ बनाने, संपादित करने और साझा करने के लिए एकदम सही जगह है!

मुफ़्त में शुरू करें

तीन लिपियों को शामिल करके शुरू करें, पहले दो हम अपने जावास्क्रिप्ट में रिएक्ट कोड लिखते हैं, और तीसरा, बैबेल, हमें पुराने ब्राउज़रों में JSX सिंटैक्स और ES6 लिखने की अनुमति देता है।

आप JSX के बारे में React JSX चैप्टर में जानेंगे ।

उदाहरण

अपनी HTML फ़ाइल में तीन CDN शामिल करें:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>

  </body>
</html>

रिएक्ट का उपयोग करने का यह तरीका परीक्षण उद्देश्यों के लिए ठीक हो सकता है, लेकिन उत्पादन के लिए आपको एक रिएक्ट वातावरण स्थापित करने की आवश्यकता होगी ।

प्रमाणन हासिल करें!

रिएक्ट मॉड्यूल को पूरा करें, अभ्यास करें, परीक्षा दें और w3schools प्रमाणित बनें !!

$95 नामांकन

एक प्रतिक्रिया वातावरण स्थापित करना

यदि आपके पास npx और Node.js इंस्टॉल हैं, तो आप का उपयोग करके एक रिएक्ट एप्लिकेशन बना सकते हैं create-react-app।

यदि आपने पहले create-react-appविश्व स्तर पर स्थापित किया है, तो यह अनुशंसा की जाती है कि आप यह सुनिश्चित करने के लिए पैकेज की स्थापना रद्द करें कि एनपीएक्स हमेशा नवीनतम संस्करण का उपयोग करता है create-react-app।

स्थापना रद्द करने के लिए, यह आदेश चलाएँ: npm uninstall -g create-react-app.

नाम का एक रिएक्ट एप्लिकेशन बनाने के लिए इस कमांड को चलाएँ my-react-app:

npx create-react-app my-react-app

create-react-appरिएक्ट एप्लिकेशन को चलाने के लिए आपको वह सब कुछ सेट करना होगा जो आपको चाहिए ।

प्रतिक्रिया आवेदन चलाएँ

अब आप अपना पहला वास्तविक रिएक्ट एप्लिकेशन चलाने के लिए तैयार हैं!

निर्देशिका में जाने के लिए यह आदेश चलाएँ my-react-app:

cd my-react-app

रिएक्ट एप्लिकेशन चलाने के लिए यह कमांड चलाएँ my-react-app:

npm start

आपके नए बनाए गए रिएक्ट ऐप के साथ एक नई ब्राउज़र विंडो खुलेगी! यदि नहीं, तो अपना ब्राउज़र खोलें और localhost:3000पता बार में टाइप करें।

परिणाम:

प्रतिक्रिया आवेदन को संशोधित करें

अब तक तो अच्छा है, लेकिन मैं सामग्री को कैसे बदलूं?

निर्देशिका में देखें , और आपको एक फ़ोल्डर my-react-appमिलेगा । srcफोल्डर के अंदर srcएक फाइल होती है जिसका नाम है App.js, इसे खोलें और यह इस तरह दिखेगी:

/myReactApp/src/App.js:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

HTML सामग्री को बदलने का प्रयास करें और फ़ाइल को सहेजें।

ध्यान दें कि फ़ाइल को सहेजने के तुरंत बाद परिवर्तन दिखाई दे रहे हैं, आपको ब्राउज़र को पुनः लोड करने की आवश्यकता नहीं है!

उदाहरण

<div className="App">अंदर की सभी सामग्री को एक <h1>तत्व से बदलें ।

जब आप सहेजें पर क्लिक करते हैं तो ब्राउज़र में परिवर्तन देखें।

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

ध्यान दें कि हमने उन आयातों को हटा दिया है जिनकी हमें आवश्यकता नहीं है (logo.svg और App.css)।

परिणाम:

आगे क्या होगा?

अब आपके कंप्यूटर पर एक रिएक्ट एनवायरनमेंट है, और आप रिएक्ट के बारे में अधिक जानने के लिए तैयार हैं।

इस ट्यूटोरियल के बाकी हिस्सों में हम रिएक्ट के विभिन्न पहलुओं को समझाने के लिए अपने "शो रिएक्ट" टूल का उपयोग करेंगे, और वे ब्राउज़र में कैसे प्रदर्शित होते हैं।

यदि आप अपने कंप्यूटर पर समान चरणों का पालन करना चाहते हैं, तो srcकेवल एक फ़ाइल रखने के लिए फ़ोल्डर को अलग करके प्रारंभ करें: index.js. आपको फ़ाइल के अंदर किसी भी अनावश्यक कोड की पंक्तियों को भी हटा देना चाहिए index.js ताकि वे नीचे "शो रिएक्ट" टूल में उदाहरण की तरह दिखें:

उदाहरण

परिणाम देखने के लिए "रन उदाहरण" बटन पर क्लिक करें।

index.js:

import React from 'react';
import ReactDOM from 'react-dom';

const myfirstelement = <h1>Hello React!</h1>

ReactDOM.render(myfirstelement, document.getElementById('root'));

❮ पहले का अगला ❯

प्रतिक्रिया ट्यूटोरियल

प्रतिक्रिया हुक

प्रतिक्रिया अभ्यास

प्रतिक्रिया प्रारंभ करना

HTML में सीधे प्रतिक्रिया करें

W3Schools रिक्त स्थान

उदाहरण

प्रमाणन हासिल करें!

एक प्रतिक्रिया वातावरण स्थापित करना

प्रतिक्रिया आवेदन चलाएँ

प्रतिक्रिया आवेदन को संशोधित करें

उदाहरण

आगे क्या होगा?

उदाहरण

व्यायाम के साथ खुद को परखें

व्यायाम: