React ट्यूटोरियल
रिएक्ट के साथ शुरुआत करना

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript

टिप्पणियों

रिएक्ट एक घोषणात्मक, घटक-आधारित जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग उपयोगकर्ता इंटरफेस बनाने के लिए किया जाता है।

रिएक्ट में कार्यात्मकताओं जैसे एमवीसी ढांचे को प्राप्त करने के लिए, डेवलपर्स इसे पसंद के फ्लक्स स्वाद के साथ संयोजन में उपयोग करते हैं, जैसे रेडक्स ।

संस्करण

संस्करण	रिलीज़ की तारीख
0.3.0	2013-05-29
0.4.0	2013-07-17
0.5.0	2013-10-16
0.8.0	2013-12-19
0.9.0	2014-02-20
0.10.0	2014-03-21
0.11.0	2014-07-17
0.12.0	2014-10-28
0.13.0	2015-03-10
0.14.0	2015/10/07
15.0.0	2016/04/07
15.1.0	2016/05/20
15.2.0	2016/07/01
15.2.1	2016/07/08
15.3.0	2016/07/29
15.3.1	2016/08/19
15.3.2	2016/09/19
15.4.0	2016/11/16
15.4.1	2016/11/23
15.4.2	2017/01/06
15.5.0	2017/04/07
15.6.0	2017/06/13

स्थापना या सेटअप

ReactJS एक एकल फ़ाइल react-<version>.js में निहित एक जावास्क्रिप्ट पुस्तकालय है जो किसी भी HTML पृष्ठ में शामिल किया जा सकता है। लोग आमतौर पर रिएक्ट DOM लाइब्रेरी के react-dom-<version>.js को भी मुख्य रिएक्ट फाइल के साथ इंस्टॉल करते हैं।

मूल समावेश

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

जावास्क्रिप्ट फ़ाइलों को प्राप्त करने के लिए, आधिकारिक प्रतिक्रिया दस्तावेज के इंस्टॉलेशन पृष्ठ पर जाएं।

रिएक्ट JSX सिंटैक्स का भी समर्थन करता है। JSX फेसबुक द्वारा बनाया गया एक एक्सटेंशन है जो XML सिंटैक्स को जावास्क्रिप्ट में जोड़ता है। JSX का उपयोग करने के लिए आपको बाबास लाइब्रेरी को शामिल करने की आवश्यकता है और JSX जावास्क्रिप्ट कोड में JSX का अनुवाद करने के लिए <script type="text/javascript"> से <script type="text/babel"> को बदलना होगा।

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

एनपीएम के माध्यम से स्थापित करना

आप निम्नलिखित करके npm का उपयोग करके React भी स्थापित कर सकते हैं:

npm install --save react react-dom

अपने जावास्क्रिप्ट प्रोजेक्ट में रिएक्ट का उपयोग करने के लिए, आप निम्न कार्य कर सकते हैं:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

यार्न के माध्यम से स्थापित करना

फेसबुक ने यार्न नाम से अपना स्वयं का पैकेज मैनेजर जारी किया, जिसका उपयोग रिएक्ट स्थापित करने के लिए भी किया जा सकता है। यार्न को स्थापित करने के बाद आपको बस इस कमांड को चलाने की आवश्यकता है:

yarn add react react-dom

फिर आप अपनी परियोजना में ठीक उसी तरह से रिएक्ट का उपयोग कर सकते हैं जैसे कि आपने npm के माध्यम से रिएक्ट स्थापित किया था।

नमस्ते विश्व घटक

एक प्रतिक्रिया घटक को ES6 वर्ग के रूप में परिभाषित किया जा सकता है जो आधार React.Component वर्ग का विस्तार करता है। अपने न्यूनतम रूप में, एक घटक को एक render विधि को परिभाषित करना होगा जो निर्दिष्ट करता है कि घटक DOM को कैसे प्रदान करता है। render तरीका रिएक्ट नोड्स को लौटाता है, जिसे जेएसएक्स सिंटैक्स को HTML जैसे टैग के रूप में परिभाषित किया जा सकता है। निम्न उदाहरण दिखाता है कि न्यूनतम घटक को कैसे परिभाषित किया जाए:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

एक घटक भी props प्राप्त कर सकते हैं। इन गुणों को इसके माता-पिता द्वारा पारित किया जाता है ताकि कुछ मूल्यों को निर्दिष्ट किया जा सके जो घटक स्वयं नहीं जान सकते हैं; एक संपत्ति में एक फ़ंक्शन भी हो सकता है जिसे कुछ घटनाओं के होने के बाद घटक द्वारा बुलाया जा सकता है - उदाहरण के लिए, एक बटन अपने onClick संपत्ति के लिए एक फ़ंक्शन प्राप्त कर सकता है और जब भी क्लिक किया जाता है तब इसे कॉल कर सकता है। एक घटक लिखते समय, इसके props को कंपोनेंट पर ही props ऑब्जेक्ट के माध्यम से एक्सेस किया जा सकता है:

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

ऊपर दिए गए उदाहरण से पता चलता है कि घटक अपने माता-पिता द्वारा name प्रोप में पारित एक मनमाना स्ट्रिंग कैसे प्रस्तुत कर सकता है। ध्यान दें कि एक घटक इसे प्राप्त करने वाले सहारा को संशोधित नहीं कर सकता है।

एक घटक को किसी भी अन्य घटक के भीतर, या सीधे DOM में प्रस्तुत किया जा सकता है यदि यह सबसे ऊपरी घटक है, तो ReactDOM.render का उपयोग ReactDOM.render और इसे घटक और DOM नोड दोनों के साथ प्रदान करें जहां आप चाहते हैं कि प्रतिक्रिया वृक्ष प्रदान किया जाए:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

अब तक आप जानते हैं कि कैसे एक बुनियादी घटक बनाने के लिए और props स्वीकार करते हैं। चलो इसे एक कदम आगे ले जाएं और state परिचय दें।

डेमो खातिर, हम अपना हैलो वर्ल्ड ऐप बनाते हैं, अगर पूरा नाम दिया जाता है तो केवल पहला नाम प्रदर्शित करें।

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

नोट: प्रत्येक घटक की अपनी स्थिति हो सकती है या यह एक प्रस्ताव के रूप में माता-पिता की स्थिति को स्वीकार कर सकता है।

कोडपेन उदाहरण के लिए लिंक।

नमस्ते दुनिया

बिना जेएसएक्स

यहां एक मूल उदाहरण है जो रिएक्ट के तत्व को बनाने के लिए रिएक्ट के मुख्य एपीआई का उपयोग करता है और ब्राउजर में रिएक्ट तत्व को प्रस्तुत करने के लिए रिएक्ट डोम एपीआई का उपयोग करता है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

JSX के साथ

स्ट्रिंग्स से एक प्रतिक्रियाशील तत्व बनाने के बजाय JSX (जावास्क्रिप्ट द्वारा XML सिंटैक्स जोड़ने के लिए फेसबुक द्वारा बनाया गया एक जावास्क्रिप्ट एक्सटेंशन) का उपयोग कर सकते हैं, जो लिखने की अनुमति देता है

var rElement = React.createElement('h1', null, 'Hello, world!');

समतुल्य के रूप में (और HTML से परिचित किसी व्यक्ति के लिए पढ़ना आसान है)

var rElement = <h1>Hello, world!</h1>;

JSX वाले कोड को एक <script type="text/babel"> टैग में संलग्न करना होगा। इस टैग के भीतर सब कुछ बैबल लाइब्रेरी का उपयोग करके सादे जावास्क्रिप्ट में बदल जाएगा (जिसे रिएक्ट लाइब्रेरी के अलावा शामिल करने की आवश्यकता है)।

तो अंत में उपरोक्त उदाहरण बन जाता है:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

ReactJS क्या है?

ReactJS एक ओपन-सोर्स, घटक आधारित फ्रंट एंड लाइब्रेरी है जो केवल एप्लिकेशन की दृश्य परत के लिए जिम्मेदार है। इसका रखरखाव फेसबुक द्वारा किया जाता है।

ReactJS HTML DOM में डेटा (दृश्य) भरने के लिए वर्चुअल DOM आधारित तंत्र का उपयोग करता है। वर्चुअल DOM इस तथ्य पर तेजी से काम करता है कि यह केवल हर बार संपूर्ण DOM को फिर से लोड करने के बजाय अलग-अलग DOM तत्वों को बदलता है

एक प्रतिक्रिया एप्लिकेशन कई घटकों से बना है, प्रत्येक HTML के एक छोटे, पुन: प्रयोज्य टुकड़े के आउटपुट के लिए जिम्मेदार है। घटकों को सरल भवन ब्लॉकों से बाहर जटिल अनुप्रयोगों के निर्माण की अनुमति देने के लिए अन्य घटकों के भीतर नेस्टेड किया जा सकता है। एक घटक आंतरिक स्थिति को भी बनाए रख सकता है - उदाहरण के लिए, एक टैबलिस्ट घटक वर्तमान में खुले टैब के अनुरूप एक चर स्टोर कर सकता है।

रिएक्ट हमें जेएसएक्स नामक डोमेन-विशिष्ट भाषा का उपयोग करके घटकों को लिखने की अनुमति देता है। जावास्क्रिप्ट घटनाओं में मिश्रण करते हुए, JSX हमें HTML का उपयोग करते हुए अपने घटकों को लिखने की अनुमति देता है। प्रतिक्रिया आंतरिक रूप से इसे एक आभासी डोम में बदल देगी, और अंततः हमारे लिए हमारे HTML को आउटपुट करेगी।

प्रतिक्रिया " प्रतिक्रिया " करने के लिए अपने घटकों में परिवर्तन जल्दी और स्वचालित रूप से आभासी डोम का उपयोग करके HTML डोम में घटकों को फिर से प्रस्तुत करने के लिए। वर्चुअल DOM एक वास्तविक DOM का इन-मेमोरी प्रतिनिधित्व है। ब्राउज़र के DOM में सीधे होने के बजाय वर्चुअल DOM के अंदर अधिकांश प्रोसेसिंग करने से, React जल्दी से कार्य कर सकता है और पिछले रेंडर चक्र के बाद से बदले गए घटकों को जोड़, अपडेट और हटा सकता है।

हैलो वर्ल्ड स्टेटलेस फंक्शन्स के साथ

स्टेटलेस घटक कार्यात्मक प्रोग्रामिंग से उनके दर्शन प्राप्त कर रहे हैं। जिसका तात्पर्य यह है कि: एक फ़ंक्शन हर समय उसी चीज़ पर वापस लौटता है जो उसे दिया जाता है।

उदाहरण के लिए:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

जैसा कि आप ऊपर के उदाहरण से देख सकते हैं कि, स्टेटलेससम हमेशा ए और बी दिए गए समान मूल्यों को लौटाएगा। हालांकि, स्टेटफुलसम फ़ंक्शन समान मानों को वापस नहीं लौटाएगा, यहां तक कि कोई पैरामीटर भी नहीं दिया गया है। इस प्रकार के फ़ंक्शन के व्यवहार को साइड-इफेक्ट भी कहा जाता है । चूंकि, घटक से परे somethings को प्रभावित करता है।

इसलिए, यह सलाह दी जाती है कि वे स्टेटलेस घटकों का अधिक से अधिक बार उपयोग करें, क्योंकि वे साइड-इफ़ेक्ट फ्री हैं और हमेशा समान व्यवहार बनाएंगे। यही कारण है कि आप अपने ऐप्स में रहना चाहते हैं क्योंकि उतार-चढ़ाव वाले राज्य बनाए रखने योग्य कार्यक्रम के लिए सबसे खराब स्थिति है।

सबसे बुनियादी प्रकार की प्रतिक्रिया घटक राज्य के बिना एक है। प्रतिक्रियाशील घटक जो उनके प्रॉप्स के शुद्ध कार्य हैं और किसी भी आंतरिक राज्य प्रबंधन की आवश्यकता नहीं है, सरल जावास्क्रिप्ट फ़ंक्शन के रूप में लिखा जा सकता है। इन्हें Stateless Functional Components कहा जाता है क्योंकि ये केवल props का एक फंक्शन है, जिसमें किसी भी state का ध्यान नहीं रखा जाता है।

यहां Stateless Functional Component की अवधारणा को Stateless Functional Component लिए एक सरल उदाहरण दिया गया है:

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

ध्यान दें कि यह घटक जो करता है वह एक h1 तत्व प्रदान करता है जिसमें name प्रोप होता है। यह घटक किसी भी राज्य का ट्रैक नहीं रखता है। यहाँ एक ES6 उदाहरण दिया गया है:

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

चूंकि इन घटकों को राज्य का प्रबंधन करने के लिए बैकिंग उदाहरण की आवश्यकता नहीं है, इसलिए रिएक्ट में अनुकूलन के लिए अधिक जगह है। कार्यान्वयन साफ है, लेकिन अभी तक स्टेटलेस घटकों के लिए ऐसी कोई अनुकूलन लागू नहीं किया गया है ।

रिएक्ट ऐप बनाएं

create-reaction-app फेसबुक द्वारा बनाया गया एक रिएक्ट ऐप बॉयलरप्लेट जनरेटर है। यह न्यूनतम सेटअप के साथ आसानी से उपयोग के लिए कॉन्फ़िगर किया गया एक विकास वातावरण प्रदान करता है, जिसमें शामिल हैं:

ईएस 6 और जेएसएक्स ट्रांसप्लिकेशन
हॉट मॉड्यूल रीलोडिंग के साथ देव सर्वर
कोड अस्तर
सीएसएस ऑटो-प्रीफ़िक्सिंग
जेएस, सीएसएस और छवि बंडलिंग, और सोर्समैप के साथ स्क्रिप्ट बनाएं
जेस्ट परीक्षण रूपरेखा

स्थापना

सबसे पहले, नोड पैकेज मैनेजर (npm) के साथ विश्व स्तर पर create-reaction-app स्थापित करें।

npm install -g create-react-app

फिर अपने चुने हुए निर्देशिका में जनरेटर चलाएं।

create-react-app my-app

नई बनाई गई निर्देशिका पर नेविगेट करें और प्रारंभ स्क्रिप्ट चलाएँ।

cd my-app/
npm start

विन्यास

बनाएँ-प्रतिक्रिया-एप्लिकेशन जानबूझकर डिफ़ॉल्ट रूप से गैर-कॉन्फ़िगर करने योग्य है। यदि गैर-डिफ़ॉल्ट उपयोग की आवश्यकता है, उदाहरण के लिए, संकलित सीएसएस भाषा जैसे कि सैस का उपयोग करने के लिए, तो इजेक्ट कमांड का उपयोग किया जा सकता है।

npm run eject

यह सभी कॉन्फ़िगरेशन फ़ाइलों के संपादन की अनुमति देता है। NB यह एक अपरिवर्तनीय प्रक्रिया है।

वैकल्पिक

वैकल्पिक प्रतिक्रिया बॉयलर में शामिल हैं:

रिएक्ट ऐप बनाएं

उत्पादन के लिए अपने एप्लिकेशन को तैयार करने के लिए, कमांड का पालन करें

npm run build

पुन: प्रयोज्य अवयव बनाने का पूर्ण आधार

अवयव और सहारा

जैसा कि रिएक्ट केवल एक आवेदन के दृष्टिकोण से चिंतित है, रिएक्ट में विकास का बड़ा हिस्सा घटकों का निर्माण होगा। एक घटक आपके आवेदन के दृश्य के एक हिस्से का प्रतिनिधित्व करता है। "प्रॉप्स" केवल <SomeComponent someProp="some prop's value" /> नोड पर उपयोग की जाने वाली विशेषताएँ हैं (जैसे <SomeComponent someProp="some prop's value" /> ), और प्राथमिक रूप से हमारा एप्लिकेशन हमारे घटकों के साथ इंटरैक्ट करता है। ऊपर दिए गए स्निपेट में, SomeComponent के अंदर, हम this.props तक पहुँच सकते हैं। {someProp: "some prop's value"} , जिसका मान ऑब्जेक्ट {someProp: "some prop's value"} ।

यह प्रतिक्रियाशील घटकों को सरल कार्यों के रूप में सोचने के लिए उपयोगी हो सकता है - वे "प्रॉपर" के रूप में इनपुट लेते हैं, और मार्कअप के रूप में आउटपुट का उत्पादन करते हैं। कई सरल घटक इसे एक कदम आगे ले जाते हैं, खुद को "शुद्ध कार्य" बनाते हैं, जिसका अर्थ है कि वे साइड इफेक्ट्स जारी नहीं करते हैं, और बेकार हैं (इनपुट्स का एक सेट दिया गया है, घटक हमेशा एक ही आउटपुट का उत्पादन करेगा)। इस लक्ष्य को औपचारिक रूप से "कक्षाओं" के बजाय कार्यों के रूप में घटक बनाकर लागू किया जा सकता है। प्रतिक्रिया घटक बनाने के तीन तरीके हैं:

कार्यात्मक ("स्टेटलेस") घटक

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass ()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

ES2015 क्लासेस

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

इन घटकों का उपयोग उसी तरह किया जाता है:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

उपरोक्त उदाहरण सभी समान मार्कअप का उत्पादन करेंगे।

कार्यात्मक घटकों में उनके भीतर "स्थिति" नहीं हो सकती है। इसलिए अगर आपके कंपोनेंट में स्टेट होना जरूरी है, तो क्लास बेस्ड कंपोनेंट्स के लिए जाएं। अधिक जानकारी के लिए घटक बनाना देखें।

एक अंतिम नोट के रूप में, प्रतिक्रिया प्रॉप्स अपरिवर्तनीय हैं एक बार जब वे पास हो गए हैं, तो अर्थ है कि उन्हें एक घटक के भीतर से संशोधित नहीं किया जा सकता है। यदि किसी घटक के माता-पिता किसी प्रोप के मूल्य को बदलते हैं, तो प्रतिक्रिया नए के साथ पुराने प्रॉप्स की जगह लेती है, तो घटक नए मूल्यों का उपयोग करके खुद को पुन: प्रस्तुत करेगा।

घटकों के लिए सहारा के रिश्ते में गहरा गोता लगाने के लिए प्रतिक्रिया और पुन: प्रयोज्य घटकों में सोच देखें।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow