रिएक्ट क्या है?
रिएक्ट फेसबुक द्वारा बनाई गई एक जावास्क्रिप्ट लाइब्रेरी है
रिएक्ट एक यूजर इंटरफेस (यूआई) लाइब्रेरी है
रिएक्ट यूआई घटकों के निर्माण के लिए एक उपकरण है
रिएक्ट क्विकस्टार्ट ट्यूटोरियल
यह एक त्वरित प्रारंभ ट्यूटोरियल है।
शुरू करने से पहले, आपको इसकी एक बुनियादी समझ होनी चाहिए:
एक पूर्ण ट्यूटोरियल के लिए:
रिएक्ट ट्यूटोरियल शुरू करेंएक HTML पृष्ठ पर प्रतिक्रिया जोड़ना
यह क्विकस्टार्ट ट्यूटोरियल इस तरह के पेज पर रिएक्ट जोड़ देगा:
उदाहरण
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
बाबेल क्या है?
बैबेल एक जावास्क्रिप्ट कंपाइलर है जो मार्कअप या प्रोग्रामिंग भाषाओं का जावास्क्रिप्ट में अनुवाद कर सकता है।
बैबेल के साथ, आप जावास्क्रिप्ट की नवीनतम सुविधाओं (ES6 - ECMAScript 2015) का उपयोग कर सकते हैं।
बैबल विभिन्न रूपांतरणों के लिए उपलब्ध है। जेएसएक्स को जावास्क्रिप्ट में बदलने के लिए रिएक्ट बैबेल का उपयोग करता है।
कृपया ध्यान दें कि Babel का उपयोग करने के लिए <script type="text/babel"> आवश्यक है।
JSX क्या है?
JSX का मतलब J ava S क्रिप्ट X ML है।
JSX एक XML/HTML जैसा JavaScript का एक्सटेंशन है।
उदाहरण
const element = <h1>Hello World!</h1>
जैसा कि आप ऊपर देख सकते हैं, JSX न तो जावास्क्रिप्ट है और न ही HTML।
JSX जावास्क्रिप्ट का एक XML सिंटैक्स एक्सटेंशन है जो ES6 (ECMAScript 2015) की पूरी शक्ति के साथ आता है।
HTML की तरह, JSX टैग में टैग नाम, विशेषताएँ और बच्चे हो सकते हैं। यदि कोई विशेषता घुंघराले ब्रेसिज़ में लिपटी हुई है, तो मान एक जावास्क्रिप्ट अभिव्यक्ति है।
ध्यान दें कि JSX HTML टेक्स्ट स्ट्रिंग के चारों ओर उद्धरण चिह्नों का उपयोग नहीं करता है।
प्रतिक्रिया डोम रेंडर
रिएक्टडॉम.रेंडर () विधि का उपयोग HTML तत्वों को प्रस्तुत करने (प्रदर्शित करने) के लिए किया जाता है:
उदाहरण
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX एक्सप्रेशंस
JSX में एक्सप्रेशन को घुंघराले {} ब्रेसिज़ में लपेटकर इस्तेमाल किया जा सकता है।
उदाहरण
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
प्रतिक्रिया तत्व
रिएक्ट एप्लिकेशन आमतौर पर एक HTML तत्व के आसपास बनाए जाते हैं ।
रिएक्ट डेवलपर्स अक्सर इसे रूट नोड (रूट एलिमेंट) कहते हैं:
<div id="root"></div>
प्रतिक्रिया तत्व इस तरह दिखते हैं:
const element = <h1>Hello React!</h1>
तत्वों को ReactDOM.render() विधि के साथ प्रस्तुत (प्रदर्शित) किया जाता है :
ReactDOM.render(element, document.getElementById('root'));
प्रतिक्रिया तत्व अपरिवर्तनीय हैं । उन्हें बदला नहीं जा सकता।
एक प्रतिक्रिया तत्व को बदलने का एकमात्र तरीका हर बार एक नया तत्व प्रस्तुत करना है:
उदाहरण
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
प्रतिक्रिया घटक
प्रतिक्रिया घटक जावास्क्रिप्ट फ़ंक्शन हैं।
यह उदाहरण "वेलकम" नामक एक प्रतिक्रिया घटक बनाता है:
उदाहरण
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
रिएक्ट घटक बनाने के लिए ES6 कक्षाओं का भी उपयोग कर सकता है।
यह उदाहरण एक रेंडर विधि के साथ वेलकम नामक एक रिएक्ट घटक बनाता है :
उदाहरण
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
प्रतिक्रिया घटक गुण
यह उदाहरण संपत्ति तर्कों के साथ "वेलकम" नामक एक प्रतिक्रिया घटक बनाता है:
उदाहरण
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
रिएक्ट घटक बनाने के लिए ES6 कक्षाओं का भी उपयोग कर सकता है।
यह उदाहरण संपत्ति तर्कों के साथ "वेलकम" नामक एक प्रतिक्रिया घटक भी बनाता है:
उदाहरण
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
जेएसएक्स कंपाइलर
इस पृष्ठ के उदाहरण ब्राउज़र में JSX को संकलित करते हैं।
उत्पादन कोड के लिए, संकलन अलग से किया जाना चाहिए।
प्रतिक्रिया आवेदन बनाएँ
फेसबुक ने रिएक्ट ऐप बनाने के लिए आपको जो कुछ भी चाहिए, उसके साथ एक क्रिएट रिएक्ट एप्लिकेशन बनाया है।
यह एक विकास सर्वर है जो रिएक्ट, JSX और ES6, ऑटो-उपसर्ग CSS फाइलों को संकलित करने के लिए वेबपैक का उपयोग करता है।
क्रिएट रिएक्ट ऐप कोड में गलतियों के परीक्षण और चेतावनी के लिए ESLint का उपयोग करता है।
क्रिएट रिएक्ट ऐप बनाने के लिए अपने टर्मिनल पर निम्नलिखित कोड चलाएँ:
उदाहरण
npx create-react-app react-tutorial
सुनिश्चित करें कि आपके पास Node.js 5.2 या उच्चतर है। अन्यथा आपको एनपीएक्स स्थापित करना होगा:
उदाहरण
npm i npx
एक फ़ोल्डर शुरू करें जहाँ से आप अपने आवेदन को रखना चाहते हैं:
उदाहरण
C:\Users\myUser>npx create-react-app react-tutorial
सफलता परिणाम:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start