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

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 مورد نظر اضافه کنید.
 

   public 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 ایجاد می کنیم و کد های زیر را به آن اضافه کنید .این کد برای نمایش دیتا است .

var 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 را رفرنس دهید.

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

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

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

<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()

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