Hướng dẫn cơ bản dùng ReactJs server-side rendering với MVC 4&5

ReactJs Server-Side Rendering MVC 4&5 hay nói dễ hiểu hơn là dùng ReactJs để load dữ liệu từ server tức html được load cùng 1 lần lúc khởi tạo chứ không phải từ javascript sau khi trang tải xong.

Các bước thực hiện như sau:

1. Mở file App_Start\ReactConfig.cs (ASP.NET MVC 4 or 5) hoặc Startup.cs (for ASP.NET Core) để khởi tạo file code cho component của mình:
   namespace MyHelloApp
   {
      public static class ReactConfig
      {
          public static void Configure()
          {
              ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
                  .AddScript("~/Scripts/Hello.jsx");
          }
      }
   }
   Dòng này sẽ báo cho server biết là chúng ta sẽ load file js này từ server. Nếu bạn có nhiều component hơn thì cứ thêm vào đây
   Nội dung file Hello.jsx:
       var Hello = React.createClass({

        render: function () {

        return (

             <div className="hello">

               <h1>Hello, ahihi</h1>

             </div>

         );

        }

});

2. Ở controller và view
1. Tạo action ở controller và tạo view
1. add code vào view:
   @Html.React("Hello", new
   {
   //   name = "ahihi"  ở đây truyền các paramaters nếu component  // // cần
   })
   Các paramaters được truyền vào sẻ dùng {this.props.name} để sử dụng
2. controller:
   public ActionResult Index()

       {

           return View();

       }

3. add code này vào cuối layout, trên thẻ </body>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
       @Scripts.Render("~/bundles/jsmain") // js cua web app
       @Html.ReactInitJavaScript()
   2 dòng script thì khỏi cần phải nói, vì dùng reactjs phải add 2 file này dù là render dữ liệu từ server hay client
   Dòng @Html.ReactInitJavaScript(): khởi tạo script của file, chứ không load source của file js (nếu show dữ liệu đơn giản không cần dòng này vẫn chạy nha :))
   
4. F5 và chạy thôi, server sẽ tự động tao html có các thẻ phụ của ReactJs kèm theo
   <div id="react1">
      <div data-reactid=".2aubxk2hwsu" data-react-checksum="-1025167618">
          <span data-reactid=".2aubxk2hwsu.0">Hello </span>
          <span data-reactid=".2aubxk2hwsu.1">Daniel</span>
      </div>
   </div>
   Server rendering HTML sẽ tự động được dùng lại bởi React client-side nên việc khởi tạo dữ liệu của bạn siêu nhanh ahihi :)
5. Nếu ứng dụng của bạn chỉ muốn dùng server-rendering (tạo html từ server) thì có thể thêm serverOnly vào View, cụ thể:
       @Html.React("Hello", new
   {
   //    name = "ahihi"
   }, serverOnly: true)
   HTML se tạo ra rất đẹp vào không có các thẻ phụ của ReactJs
       <div id="react1">
      <div>
          <span>Hello </span>
          <span>Daniel</span>
      </div>
   </div>
   Và bạn cũng không cần dòng @Html.ReactInitJavaScript() o layout nữa

Nguồn: reactjs.net