React JavaScript (Node.js) के लिए: पूर्ण गाइड उदाहरण सहित

React क्या है और इसकी आवश्यकता क्यों है?

React एक डिक्लेरेटिव, कुशल और लचीली ओपन-सोर्स JavaScript लाइब्रेरी है जो यूज़र इंटरफ़ेस (UI) बनाने के लिए उपयोग की जाती है। इसे Facebook (अब Meta) के इंजीनियरों ने 2013 में विकसित किया था और तब से यह दुनिया की सबसे लोकप्रिय फ्रंटएंड तकनीकों में से एक बन गई है। React डेवलपर्स को इंटरफ़ेस को स्वतंत्र, पुन: उपयोग योग्य घटकों (components) में विभाजित करके जटिल, इंटरैक्टिव और स्केलेबल वेब एप्लिकेशन बनाने की अनुमति देता है।

React की आवश्यकता क्यों है?

• कम्पोनेंट-आधारित दृष्टिकोण: React UI को अलग-अलग ब्लॉक्स (कम्पोनेंट्स) में बनाता है, जिनमें से प्रत्येक अपनी स्थिति (state) को प्रबंधित करता है। इससे कोड का विकास, परीक्षण और रखरखाव आसान हो जाता है।
• डिक्लेरेटिव प्रकृति: आप बताते हैं कि एप्लिकेशन की प्रत्येक अवस्था के लिए UI कैसा दिखना चाहिए, और React केवल उन कम्पोनेंट्स को अपडेट और रेंडर करता है जो बदले हैं। इससे कोड अधिक पूर्वानुमानित और डीबग करने में आसान हो जाता है।
• वर्चुअल DOM (Virtual DOM): React वास्तविक DOM की एक हल्की कॉपी (वर्चुअल DOM) का उपयोग करता है। जब एप्लिकेशन की स्थिति बदलती है, तो React पहले वर्चुअल DOM को अपडेट करता है, फिर इसकी तुलना पिछले संस्करण से करता है (diffing) और वास्तविक DOM में न्यूनतम बदलाव लागू करता है। इससे प्रदर्शन में काफी सुधार होता है, खासकर बार-बार अपडेट होने वाले एप्लिकेशन में।
• विशाल समुदाय और इकोसिस्टम: React का दुनिया भर में सबसे बड़ा डेवलपर समुदाय है, जिसका मतलब है कि तैयार समाधानों, लाइब्रेरीज़, टूल्स (React Router, Redux, Next.js, Gatsby) और सीखने की सामग्री की कोई कमी नहीं है।
• बहुमुखी प्रतिभा: React का उपयोग न केवल वेब एप्लिकेशन के लिए, बल्कि मोबाइल (React Native), डेस्कटॉप (Electron) और यहां तक कि VR एप्लिकेशन (React 360) के लिए भी किया जा सकता है।

React सरल सिंगल-पेज एप्लिकेशन (SPA) से लेकर जटिल कॉर्पोरेट सिस्टम और सोशल नेटवर्क तक, किसी भी पैमाने के प्रोजेक्ट के लिए उपयुक्त है।

React की स्थापना (npm)

React के साथ काम करने के लिए आपको Node.js (संस्करण 14 या उच्चतर) और एक पैकेज मैनेजर npm (या yarn) की आवश्यकता होगी। नया प्रोजेक्ट शुरू करने का सबसे आसान तरीका आधिकारिक टूल Create React App का उपयोग करना है।

# Create React App को वैश्विक रूप से स्थापित करें (वैकल्पिक)
npm install -g create-react-app

# my-app नाम से एक नया प्रोजेक्ट बनाएं
npx create-react-app my-app

# प्रोजेक्ट डायरेक्टरी में जाएं
cd my-app

# डेवलपमेंट सर्वर शुरू करें
npm start

इन कमांड्स को चलाने के बाद, आपका ब्राउज़र स्वचालित रूप से http://localhost:3000 पर खुल जाएगा, जहां एक कार्यशील React एप्लिकेशन चल रहा होगा।

महत्वपूर्ण: npx एक टूल है जो पैकेज को वैश्विक रूप से स्थापित किए बिना चलाता है। यदि आपके पास npm का पुराना संस्करण (< 5.2) है, तो npm install -g create-react-app और फिर create-react-app my-app का उपयोग करें।

वैकल्पिक तरीका (मैन्युअल स्थापना):

# प्रोजेक्ट फ़ोल्डर बनाएं और npm को इनिशियलाइज़ करें
mkdir my-react-app && cd my-react-app
npm init -y

# React और ReactDOM स्थापित करें
npm install react react-dom

# JSX को ट्रांसपाइल करने के लिए Babel और बिल्ड के लिए Webpack स्थापित करें (कॉन्फ़िगरेशन की आवश्यकता होगी)
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

हालांकि, शुरुआती लोगों के लिए Create React App का उपयोग करने की दृढ़ता से अनुशंसा की जाती है, क्योंकि यह बिल्डर (Webpack, Babel) की सभी जटिल सेटिंग्स का ध्यान रखता है।

कोड उदाहरण के साथ त्वरित शुरुआत

Create React App का उपयोग करके प्रोजेक्ट बनाने के बाद, src/App.js फ़ाइल खोलें। यह आपके एप्लिकेशन का मुख्य कम्पोनेंट है। आइए एक सरल "Hello, World!" एप्लिकेशन बनाएं जिसमें एक बटन हो जो शीर्षक बदलता है।

// src/App.js
import React, { useState } from 'react';
import './App.css';

function App() {
  // useState हुक का उपयोग करके स्थिति (state) घोषित करें