React.js में वेबसाइट बनाने के लिए Beginners गाइड
अगर आप वेब साईट डेवलपमेंट में नए हैं और एक डायनामिक वेबसाइट बनाना चाहते हैं, तो React.js एक उत्कृष्ट विकल्प है। React.js एक JavaScript लाइब्रेरी है जो आपको प्रभावी तरीके से इंटरैक्टिव यूज़र इंटरफ़ेस बनाने का मौक़ा देती है। इस स्टेप-बाय-स्टेप गाइड में, हम आपको React.js का उपयोग करके एक शुरुआती वेबसाइट बनाना सिखायेंगे।
आरंभ में, सुनिश्चित करें कि आपके कंप्यूटर में यह इंस्टॉल है:
- Node.js और npm (Node Package Manager): आप इन्हें आधिकारिक Node.js जिसे आप यहाँ क्लिक कर ऑफिसियल वेबसाइट से डाउनलोड और इंस्टॉल कर सकते हैं।
- कोड एडिटर: आपको किसी भी टेक्स्ट एडिटर या आईडीई IDE को इंस्टॉल करना होगा, जिसमें आप आराम से काम कर सकते हैं। पॉपुलर विकल्पों में विज़ुअल स्टूडियो कोड Visual Studio Code, सबलाइम टेक्स्ट Sublime Text, या एटम Atom शामिल हैं।
चरण 1: सेटअप
पहले, अपने डेवलपमेंट Environment को सेटअप करें। अपने टर्मिनल या कमांड प्रॉम्प्ट को खोलें और निम्नलिखित कमांड का उपयोग करके एक नया React.js प्रोजेक्ट बनाएं:
npx create-react-app my-website
my-website को अपने प्रोजेक्ट के नाम के साथ बदलें। यह कमांड एक नया डायरेक्टरी बनाएगी जिसका नाम my-website या जो भी आप देंगे वह, होगा और इसके अंदर एक नया React.js प्रोजेक्ट सेटअप करेगी।
चरण 2: प्रोजेक्ट डायरेक्ट्री में जायें
cd कमांड का उपयोग करके हाल ही में बनाई गई प्रोजेक्ट डायरेक्टरी में जाएं:
cd my-websiteचरण 3: डेवलपमेंट सर्वर आरंभ करें
अब, हम अपने React ऐप को functionality देखने के लिए डेवलपमेंट सर्वर को चालू करेंगे। निम्नलिखित कमांड को चलाएं:
npm startयह एक लोकल डेवलपमेंट सर्वर को शुरू करेगा और जो आपके डिफ़ॉल्ट वेब ब्राउज़र में, React ऐप को प्रीव्यू के लिए खोलेगा। आपको रिएक्ट के घूमते हुए लोगो के साथ एक डिफ़ॉल्ट रिएक्ट ऐप दिखाई देगी।
चरण 4: प्रोजेक्ट स्ट्रक्चर को एक्स्प्लोर करें
प्रोजेक्ट स्ट्रक्चर को एक्स्प्लोर करने करने के लिए अपनी React ऐप के मुख्य सोर्स कोड को src डायरेक्टरी के अंदर पाएंगे, जिसमें शामिल है – public डायरेक्टरी में स्टेटिक एसेट्स और public/index.html फ़ाइल शामिल है, जो आपकी ऐप के लिए मुख्य HTML फ़ाइल है।
चरण 5: अपने रिएक्ट कंपोनेंट को एडिट करें
अपने कोड एडिटर में src/App.js फ़ाइल खोलें। यह रिएक्ट ऐप का मुख्य कंपोनेंट है। आप इस फ़ाइल को modify करके अपनी वेबसाइट का कंटेंट और स्ट्रक्चर को एडिट कर सकते हैं।
आपके src/App.js फ़ाइल के अनुरूप निम्नलिखित कोड को डालें:
import React from 'react';
import './App.css';return (
<div className=“App”>
<header className=“App-header”>
<h1>Welcome to My Website</h1>
<p>This is a simple React.js website.</p>
</header>
</div>
);
}
चरण 6: स्टाइल जोड़ें
src डायरेक्टरी में एक नई फ़ाइल App.css बनाएं और निम्नलिखित CSS कोड जोड़ें:
.App {
text-align: center;
}background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
यह CSS आपकी वेबसाइट के हैडर को स्टाइल करेगा।
चरण 7: अपने परिवर्तनों को देखें
अपने परिवर्तनों को सेव करें और अपने वेब ब्राउज़र में वापस जाएं, जहां आपको नए कंटेंट और स्टाइल्स के साथ अपडेट की गई वेबसाइट दिखाई देगी।
चरण 8: डिप्लॉयमेंट
जब आप अपनी वेबसाइट से संतुष्ट हो जाएं, तो आप इसे अपनी होस्टिंग में अपलोड कर लाइव डिप्लॉय कर सकते हैं।
बधाई! आपने अपनी पहली वेबसाइट React.js का उपयोग करके बना ली है। यहां से, आप रिएक्ट के फ़ीचर्स को और भी अधिक जांच सकते हैं, जैसे कि स्टेट मैनेजमेंट, रूटिंग, और बैकएंड एपीआई के साथ एक संघटित वेब एप्लिकेशन बनाना।
हैप्पी कोडिंग!
Step-by-Step Guide to Creating a Website in React.js for Beginners
If you’re new to web development and want to create a dynamic website, React.js is an excellent choice. React.js is a JavaScript library that allows you to build interactive user interfaces efficiently. In this step-by-step guide, we’ll walk you through creating a simple website using React.js.
Prerequisites
Before we begin, make sure you have the following installed on your computer:
- Node.js and npm (Node Package Manager): You can download and install them from the official Node.js website.
- A code editor: Choose any text editor or IDE you’re comfortable with. Popular choices include Visual Studio Code, Sublime Text, or Atom.
Step 1: Set Up Your Environment
First, let’s set up our development environment. Open your terminal or command prompt and run the following command to create a new React.js project:
npx create-react-app my-website
Replace my-website with the desired name for your project. This command will create a new directory called my-website and set up a new React.js project inside it.
Step 2: Navigate to Your Project Directory
Navigate to the newly created project directory using the cd command:
cd my-website
Step 3: Start the Development Server
Now, let’s start the development server to see our React app in action. Run the following command:
npm start
This will start a local development server and automatically open your default web browser to preview your React app. You should see a default React app with the React logo spinning.
Step 4: Explore the Project Structure
Take a moment to explore the project structure. You’ll find the main source code for your React app inside the src directory. The public directory contains the static assets and the public/index.html file, which is the main HTML file for your app.
Step 5: Modify Your React Components
Open the src/App.js file in your code editor. This is the main component of your React app. You can edit this file to modify your website’s content and structure.
Replace the contents of App.js with the following code:
import React from 'react';
import './App.css';return (
<div className=“App”>
<header className=“App-header”>
<h1>Welcome to My Website</h1>
<p>This is a simple React.js website.</p>
</header>
</div>
);
}
Step 6: Add Styles
Create a new file called App.css in the src directory and add the following CSS code:
.App {
text-align: center;
}background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
This CSS will style the header of your website.
Step 7: View Your Changes
Save your changes and go back to your web browser. You should see your updated website with the new content and styles.
Step 8: Deployment
Once you’re satisfied with your website, you can deploy it to a hosting server।
Congratulations! You’ve created your first website using React.js. From here, you can continue to explore React’s features, such as state management, routing, and integrating with backend APIs, to build more complex and interactive web applications. Happy coding!