प्रतिक्रिया ट्यूटोरियल
रिएक्ट यूजर इंटरफेस बनाने के लिए एक जावास्क्रिप्ट लाइब्रेरी है।
रिएक्ट का उपयोग सिंगल-पेज एप्लिकेशन बनाने के लिए किया जाता है।
रिएक्ट हमें पुन: प्रयोज्य UI घटक बनाने की अनुमति देता है।
अभी प्रतिक्रिया सीखना शुरू करेंउदाहरणों से सीखना
हमारा "शो रिएक्ट" टूल रिएक्ट को प्रदर्शित करना आसान बनाता है। यह कोड और परिणाम दोनों दिखाता है।
उदाहरण:
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));
व्यायाम द्वारा सीखना
प्रतिक्रिया प्रश्नोत्तरी
एक प्रश्नोत्तरी के साथ अपने प्रतिक्रिया कौशल का परीक्षण करें।
रिएक्ट ऐप बनाएं
रिएक्ट सीखने और उसका परीक्षण करने के लिए, आपको अपने कंप्यूटर पर एक रिएक्ट एनवायरनमेंट सेट करना चाहिए।
यह ट्यूटोरियल का उपयोग करता है create-react-app।
रिएक्ट एप्लिकेशन बनाने के create-react-appलिए टूल आधिकारिक तौर पर समर्थित तरीका है।
Node.js का उपयोग करना आवश्यक है create-react-app।
अपना टर्मिनल उस निर्देशिका में खोलें जिसे आप अपना एप्लिकेशन बनाना चाहते हैं।
नाम का एक रिएक्ट एप्लिकेशन बनाने के लिए इस कमांड को चलाएँ
my-react-app:
npx create-react-app my-react-app
create-react-app रिएक्ट एप्लिकेशन को चलाने के लिए आपको जो कुछ भी चाहिए वह सब कुछ सेट कर देगा।
नोट:
यदि आपने पहले create-react-appविश्व स्तर पर स्थापित किया है, तो यह अनुशंसा की जाती है कि आप यह सुनिश्चित करने के लिए पैकेज की स्थापना रद्द करें कि एनपीएक्स हमेशा के नवीनतम संस्करण का उपयोग करता है
create-react-app। स्थापना रद्द करने के लिए, यह आदेश चलाएँ: npm uninstall -g create-react-app.
प्रतिक्रिया आवेदन चलाएँ
निर्देशिका में जाने के लिए यह आदेश चलाएँ my-react-app:
cd my-react-app
रिएक्ट एप्लिकेशन को निष्पादित करने के लिए यह कमांड चलाएँ
my-react-app:
npm start
आपके नए बनाए गए रिएक्ट ऐप के साथ एक नई ब्राउज़र विंडो खुलेगी! यदि नहीं, तो अपना ब्राउज़र खोलें और
localhost:3000पता बार में टाइप करें।
परिणाम:
आप रिएक्ट गेट स्टार्टेड चैप्टर create-react-appके बारे में अधिक जानेंगे ।
आपको पहले से क्या पता होना चाहिए
React.JS से शुरू करने से पहले, आपके पास मध्यवर्ती अनुभव होना चाहिए:
- एचटीएमएल
- सीएसएस
- जावास्क्रिप्ट
आपको ईसीएमएस्क्रिप्ट 6 (ईएस6) में पेश की गई नई जावास्क्रिप्ट सुविधाओं के साथ कुछ अनुभव भी होना चाहिए, आप उनके बारे में रिएक्ट ईएस 6 अध्याय में सीखेंगे।