دسته‌ها
Uncategorized

مزایای React.js برای SEO


مزایای React.js برای SEO

React.js یک کتابخانه است که شبکه های اجتماعی مهمی چون فیسبوک و telegram از آن استفاده کرده اند.البته این کتابخانه اساسا در فیسبوک توسعه داده شده است .

مزایای React.js برای SEO

React.js یک کتابخانه است که شبکه های اجتماعی مهمی چون فیسبوک و telegram از آن استفاده کرده اند.البته این کتابخانه اساسا در فیسبوک توسعه داده شده است .

یکی از ویژگی های منحصر به فرد این تکنولوژی این است که هم در سمت سرور و هم در سمت کاربر به صورت هماهنگ و سازگار کار می کند.

تعریف Dom: وقتی یک صفحه وبی بارگذاری میشود مرورگر یک مدل شی گرا از المان های موجود در صفحه می سازد.این مدل Dom و یا Document Object Model نام دارد .این نمودار یک نمودار درختی از اشیا موجود در صفحه است .برنامه هایی مانند جاوااسکریپت با استفاده از مدل یک صفحه Html را به صورت پویا ایجاد می کنند.درتکنولوژی React.js از مفهومی به نام Virtual DOM استفاده می شود .این حالت زیر گروه های انتخابی را بر اساس شرایط ارائه می کند.این کار را به این صورت انجام می دهد که تا جای ممکن از دستکاری Dom جلوگیری می کند.

Virtual DOM به این صورت کارمیکند که برای هر شی Dom که ویژگی جدیدی قرار است برای آن ساخته شود نیازی نیست که آن شی دوباره ساخته شود تنها نیاز است که آن ویژگی مورد نظر را تغییر داد و یا افزود.

بعد از آشنایی کلی با React.js راجع به مزیت هایی که این روش در SEOبرای ما ایجاد می کند صحبت می کنیم .

مشکلی که جاوااسکریپت داشت این است که به طور کامل Search Engin Freindly نیست  .با وجود اینکه  Crawl و index های گوگل ، محتواهای Ajax را هم می فهمند ولی خیلی قابل اعتماد نیست .امتیاز React.js این است که شما می توانید آن را سمت سرور اجرا کنید و virtual DOM ها در سمت سرور Renden میشوند و بعد به سمت کلاینت ارسال می شوند

قصد داریم یک پروژه ساده به کمک React.js بنویسیم

ابتدا Visual Studio را باز کرده و یک پروژه asp.net MVC از نوع Empty باز می کنیم .سپس در Tools=>Install package Manager Consol دستور زیر را تایپ می کنیم

Install-Package react.js

 با این دستور کتابخانه React.js به پروژه ما اضافه می شود.در قسمت Solution Explorer در داخل فولدر Scripts یک فولدری به نام react ایجاد شده است که در داخل آن اسکریپت های جاوااسکریپت قرار دارد .بعد از این کار باید React.Web.Mvc4 را نصب کنیم .دوباره در کنسول مربوط به Nuget دستور زیر را وارد میکنیم

Install-Package React.Web.Mvc4

حال یک کنترلر خالی ایجاد کنید.کد زیر را به Actionمورد نظر اضافه کنید.
 

123456789public ActionResult Index(){var employees = new[]{new  {id= "1", name= "ایمان ", department= "IT", phone= "555-1212"},new {id="2", name= "سجاد", department= "Sales", phone= "555-1213"},new  {id= "3", name= "رحمان", department= "HR", phone= "123-456"}};return View(employees);}

کامپوننت Grid:

یک فایل جاوااسکریپت به نام Grid.jsx در داخل فولدر Scripts ایجاد می کنیم و کد های زیر را به آن اضافه کنید .این کد برای نمایش دیتا است .

123456789101112131415161718192021222324252627282930var Cell = React.createClass({   render: function () {var data = this.props.data;return <div className="cell">{this.props.data}</div>}}); var Row = React.createClass({render: function () {return (<div className="row"><Cell data={this.props.data.name} /><Cell data={this.props.data.department} /><Cell data={this.props.data.phone} /></div>);}});var Grid = React.createClass({render: function () {var headerRow = <div className="row"><Cell data="Name" /><Cell data="Department" /><Cell data="Phone" /></div>; var rows = this.props.data.map(function (rowData, index) {return <Row key={index} data={rowData}>Row</Row>;});return <div className="table">{headerRow}{rows}</div>;}});

Rendering سمت سرور

وارد مسیر App_Start\ReactConfig.cs شوید و کامپوننت Grid را رفرنس دهید.

12345678public static class ReactConfig{public static void Configure(){ReactSiteConfiguration.Configuration = new ReactSiteConfiguration().AddScript("~/Scripts/Grid.jsx");}}

این کد به React.js می گوید که جاوااسکریپت سمت سرور را لود کند .

در مرحله بعد در داخل View مربوط به ایندکس کد های زیر را کپی کنید

12345678910<h2>React Demo:</h2> @Html.React("Grid", new{data = Model}) <script src="~/Scripts/react/react-0.12.2.min.js"></script><script src="~/Scripts/Grid.jsx"></script>@Html.ReactInitJavaScript()

بعد از اجرا شکل زیر را خواهید دید

فایل های ضمیمه
استوریج
خرید پاوربانک
خرید سرور

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هفده + هجده =