If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
ReactJS के साथ web development start करना काफी आसान है, और इसका setup भी simple और quick है। अगर आप पहली बार React सीखने जा रहे हैं, तो ये topic में आपको React के setup और installation के basic steps detail में समझायेगा।
इस guide में हम Create React App के through React application setup करना और कुछ additional installation methods के bare में भी जानगे।
React के साथ काम करने से पहले कुछ basic prerequisites होनी चाहिए -
JavaScript : Basic JavaScript और ES6 syntax को समझना जरूरी है क्योंकि React JavaScript पर based है।
Node.js & npm : Node.js और npm (Node Package Manager) कि जरूरत होती है क्योंकि ये React के packages और dependencies को handle करते हैं। Node.js को official website से download और install कर सकते हैं।
Code Editor : एक अच्छा code editor (VS Code highly recommended) जो आपको syntax highlighting और extensions provide करे React के साथ काम करने के लिए।
●●●
ReactJs install करने का सबसे easy और recommended way है create-react-app command. ये एक official tool है जो React team ने develop किया है ताकि आप एक नया React project easily setup कर सकें बिना complex configuration के।
ये tool आपके project के लिए सारी necessary files और dependencies setup करता है।
सबसे पहले Node.js install करें अगर अभी तक आपके system पर installed नहीं है। Node.js के साथ npm automatically install हो जाता है।
Installation के बाद command line पर type करके check करें -
node -v npm -v
अगर दोनो commands version numbers return करती हैं, तो इसका मतलब Node और npm successfully installed हैं।
Terminal या command prompt open करें और npx command का use करें React app create करने के लिए -
npx create-react-app my-app
यहां my-app project का नाम है जो आप कुछ भी रख सकते हैं। npx एक ऐसा command है जो npm के साथ आता है और ये create-react-app package को temporary run करता है बिना manually install किये।
Note: अगर npx command error दे रहा है तो npm को update करने कि जरूरत हो सकती है। Update के लिए npm install -g npm@latest run करें।
अब newly created app directory में 'my-app' में navigate करें और React app run करने के लिए आप terminal में type करें।
cd my-app npm start
इस command से आपका React application local server पर start हो जायेगा और http://localhost:3000 पर open होगा। Browser में open करके आप अपने पहले React app को देख सकते हैं ।
●●●
अगर आप Create React App नहीं use करना चाहते तो manually भी React setup कर सकते हैं। इसमें थोड़ा ज़्यादा configuration involve होता है लेकिन ये advanced users के लिए useful हो सकता है।
सबसे पहले एक नया folder create करें और उसमे terminal open करें. उसके बाद npm init command use करके project को initialize करें -
mkdir my-app cd my-app npm init -y
React और ReactDOM को install करें, क्योंकि ये दोनो React application के main packages हैं -
npm install react react-dom
React application को bundle और compile करने के लिए आपको Webpack और Babel कि जरूरत होगी।
npm install webpack webpack-cli webpack-dev-server --save-dev npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
यहां Webpack और Babel के configurations create करने होंगे (webpack.config.js और .babelrc files) ताकि आपका code compile और bundle हो सके।
ये manual setup beginners के लिए complex हो सकता है, इसलिए Create React App को ज़्यादा prefer किया जाता है।
●●●
अगर आप React को सिर्फ experiment या testing के लिए use करना चाहते हैं बिना build tools के, तो आप React को directly HTML file में CDN के through भी include कर सकते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React CDN Setup</title>
<!-- React aur ReactDOM ke CDN links -->
<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>
</head>
<body>
<div id="root"></div>
<script>
// Simple React component
const App = () => {
return React.createElement('h1', null, 'Hello, React from CDN!');
};
// Component ko root div mein render karna
ReactDOM.render(React.createElement(App), document.getElementById('root'));
</script>
</body>
</html>ये approach beginners और React कि basic testing के लिए काफी useful है। लेकिन large applications के लिए ये recommended नहीं है।
●●●
React install होने के बाद कुछ common commands हैं जो project में काम आती हैं -
npm start : Development server को start करता है और application को http://localhost:3000 पर run करता है।
npm run build : Production के लिए optimized code generate करता है जो deployment के लिए ready होता है।
npm test : Application के tests को run करता है (अगर आपके project में testing setup है तो)।
npm run eject : अगर आपको create-react-app के configuration को customize करना हो तो eject command use होता है। लेकिन इस command को cautiously use करें क्योंकि ये irreversible है।