Blazor शून्य से: अध्याय 2 — आपका पहला Blazor ऐप

· 2 मिनट पढ़ें
Blazor .NET Web Development Series
Available in: हिन्दी · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · Русский · 中文 · العربية · Polski · Türkçe · Bahasa Indonesia · Nederlands

Blazor शून्य से के अध्याय 2 में आपका स्वागत है। अगर आपने अध्याय 1 नहीं पढ़ा, तो पहले उसे पढ़ें।

इस अध्याय में हम एक नया Blazor ऐप बनाएंगे, उसे लोकल चलाएंगे, और समझेंगे कि मुख्य फाइलें क्या काम करती हैं।

चरण 1: प्रोजेक्ट बनाएं

टर्मिनल में:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

यह .NET 9 का Blazor Web App डिफ़ॉल्ट स्ट्रक्चर के साथ बनाता है।

अगर टूल आपसे interactivity model चुनने को कहे, तो Interactive Server से शुरू करें।

चरण 2: लोकल में चलाएं

ऐप शुरू करें:

dotnet watch

फिर टर्मिनल में दिखा URL खोलें (आम तौर पर https://localhost:5xxx)। आपको Home, Counter, और Weather पेज दिखने चाहिए।

अगर यह चल रहा है, तो आपका environment तैयार है।

चरण 3: प्रोजेक्ट स्ट्रक्चर समझें

शुरुआत में ये फाइलें/फोल्डर जानना जरूरी है:

  • Program.cs — services register करता है और HTTP pipeline configure करता है।
  • Components/App.razor — ऐप का root component।
  • Components/Routes.razor — page routes की mapping।
  • Components/Pages/ — Home और Counter जैसी routable pages।
  • Components/Layout/ — shared layout (MainLayout.razor, nav menu)।
  • wwwroot/ — static assets (CSS, images, favicon)।
  • appsettings.json — configuration values।

अभी हर फाइल गहराई से समझने की जरूरत नहीं है। इस चरण में बस इतना जानें कि UI कहाँ है और startup कहाँ configure होता है।

चरण 4: पहला बदलाव करें

Components/Pages/Home.razor खोलें और content को इससे बदलें:

@page "/"

<PageTitle>Blazor शून्य से</PageTitle>

<h1>Blazor शून्य से</h1>
<p>अध्याय 2 लोकल में चल रहा है।</p>

फाइल सेव करें और ब्राउज़र refresh करें। dotnet watch के साथ बदलाव तुरंत दिखना चाहिए।

यह छोटा बदलाव पूरा flow दिखाता है: edit -> build -> render।

चरण 5: Program.cs एक बार पढ़ें

इसे याद करने की जरूरत नहीं, लेकिन ये लाइनें पहचानें:

  • AddRazorComponents() Razor components enable करता है।
  • AddInteractiveServerComponents() interactive server components enable करता है।
  • MapRazorComponents<App>() root component को endpoints से map करता है।

इन लाइनों से पता चलता है कि ऐप कैसे boot होता है और कौन-सी rendering capabilities active हैं।

आम समस्याएं

अगर कुछ fail हो, तो अक्सर कारण ये होते हैं:

  • पुराना SDK: dotnet --version चलाएं और .NET 9 जांचें।
  • HTTPS certificate warning: dotnet dev-certs https --trust चलाएं।
  • Port conflict: पुराने dotnet processes रोकें और फिर चलाएं।

आगे क्या

अध्याय 3 में हम components पर गहराई से जाएंगे: parameters, composition, और reusable UI structure।