REACTJS

React là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng giao diện người dùng. React cho tốc độ phản hồi tuyệt vời khi người dùng nhập bằng phương pháp mới ( JSX) để hiển thị trang web. React cho phép các nhà phát triển tạo các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang. Mục đích chính của React là nhanh, có thể mở rộng và đơn giản. Tuy nhiên, React chỉ hoạt động trên giao diện người dùng trong ứng dụng.React tương ứng với View trong mẫu MVC. Ngoài ra, nó có thể được sử dụng với các thư viện JavaScript khác hoặc các framework như: Angular JS trong MVC

JSX

Trong React , ngoài việc sử dụng JavaScript thuần để tạo mẫu , nó còn sử dụng JSX để tốc độ nhanh hơn. JSX là một ngôn ngữ cho phép viết mã HTML trong JavaScript. Khác với JavaScript , JSX là một statically-typed , có nghĩa là nó được biên dịch trước khi chạy,giống như Java, C++ .Vì thế lỗi được phát hiện ngay trong quá trình biên dịch.

Tại sao sử dụng ReactJs?

• Sự đơn giản : React sử dụng một cú pháp đặc biệt được gọi là JSX cho phép kết hợp HTML với JavaScript.
• Dễ học : Bất cứ ai có kiến thức cơ bản về lập trình đều có thể dễ dàng hiểu được React. Với React, bạn chỉ cần có kiến thức cơ bản về CSS, JS và HTML.
• Hiệu suất cùng với Virtual DOM : Khi bạn hiển thị một phần tử của JSX , mọi đối tượng virtual DOM đều được cập nhập.

REACTJS.NET

ReactJS.NET giúp việc sử dụng React cho C # và các ngôn ngữ .NET khác trở nên dễ dàng hơn, đặc biệt là cho  ASP.NET MVC (mặc dù nó cũng hoạt động với các môi trường khác). ReactJS.NET hỗ trợ cả ASP.NET 4 (với MVC 4 hoặc 5) và ASP.NET Core MVC. Ngoài ra , ReactJS.NET là nền tảng đa nền tảng nên nó có thể chạy trên Linux thông qua Mono hoặc .NET Core.

Bắt đầu ứng dụng ReactJS.NET với ASP.NET Core MVC

Tạo một dự án ASP.NET Core MVC mới

Cài đặt các gói

Đi đến Nuget Package Manager bằng cách nhấn chuột phải vào dự án ở trong Solution Explorer and chọn “Manage NuGet Packages…”.

Nhấn “Browse” sau đó tìm và cài đặt các gói :

• JavaScriptEngineSwitcher.V8
• React.AspNet
• JavaScriptEngineSwitcher.V8.Native.win-x64
• JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

Cài đặt cấu hình

Tại file Startup.cs

Ở trên cùng của file Startup.cs thêm đoạn code phía dưới

using Microsoft.AspNetCore.Http;

using JavaScriptEngineSwitcher.V8;

using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;

using React.AspNet;

Thay đổi hàm ConfigureServices bằng đoạn code bên dưới

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
       services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
       services.AddReact();
       // Make sure a JS engine is registered, or you will get an error!
       services.AddJsEngineSwitcher(options => options.DefaultEngineName =V8JsEngine.EngineName)
              .AddV8();
       services.AddControllersWithViews();
}

Thay đổi hàm Configure bằng đoạn code bên dưới

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see        https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
 }
 app.UseHttpsRedirection();
 app.UseReact(config =>
 {

 });
 app.UseStaticFiles();
 app.UseRouting();
 app.UseAuthorization()
 app.UseEndpoints(endpoints =
 {
    endpoints.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
 });
}

Thêm vào trên cùng của file Views\_ViewImports.cshtml

@using React.AspNet

Các đặc trưng

Component 

• Trong React, các Component hoạt động giống như các hàm trả về các Component HTML.
• Các Component là các Component độc lập và có thể tái sử dụng.
• Có hai loại Component: Component Function và Component Class.
• Các Component thực hiện các công việc tương tự như các hàm trong Javascript, nhưng chúng độc lập và trả về HTML thông qua hàm render.

Tạo component đầu tiên

Tạo file App.jsx 

Tạo file App.jsx với đoạn code phía dưới 

class FisrtComponent extends React.Component {
render() {
     return (
              <div className="component">
              Hello, world! This is a component.
              </div>
             );
         }
}

ReactDOM.render(<FisrtComponent />, document.getElementById('content')

Thay thế mã code của file index.cshtml bằng đoạn code bên dưới

@{
Layout = null;
}

<html>
<head>
    <title>Hello React</title>
</head>
<body>
 <div id="content"></div>
 <script  src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
 <script  src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
 <script src="@Url.Content("~/js/App.jsx")"></script>
</body>
</html>

Tại hàm Configure trong file startup.config thêm đoạn code được in đậm bên dưới

app.UseReact(config =>
{
    config
    .AddScript("~/js/App.jsx");
});

Chạy dự án

Props

• Props được sử dụng để truyền dữ liệu vào component.
• Trong React, Props là các đối số được truyền vào các component React.
• Props được chuyển đến các component thông qua các thuộc tính HTML.
• Props có giá trị cố định không thể thay đổi.

Sử dụng props

Sử dụng props bằng cách sử dụng this.props để lấy giá trị của props giống với đoạn code bên dưới

class FisrtComponent extends React.Component {
render() {
        return (
            <div className="Component">
                <h1> Hello, world! This is a component. </h1>
                <h2> This is data from props : {this.props.value}</h2>
            </div>
        );
    }
}

ReactDOM.render(<FisrtComponent value = "Props test" />, document.getElementById('content'))

Kết quả

State

• Các state giống như các biến cục bộ trong một cây component và các component con có thể sử dụng state của component mẹ.
• Các state có thể thay đổi.
• Khi đối tượng state thay đổi, component sẽ hiển thị lại.

Sử dụng State

Tạo các thuộc tính của state

constructor(props) {
        super(props);
        this.state = {
            brand: "Ford",
            color: "Blue",
            year: 1994
        };
}

Sử dụng this.setState để set giá trị cho những state này

this.setState({ color:"Red" })

Tạo hàm onclick để thay đổi state

changeColor = () => { this.setState({ color:"Red" }) }

Thêm sự kiện cho nút nhấn

<button
          type="button"
          onClick={this.changeColor}
>Change Color</button>

Kết quả

Trước khi nhấn nút

Sau khi nhấn nút

Các đặc trưng khác

• Hook
• Webpack
• ES6

Tài liệu tham khảo

• https://reactjs.org/docs/getting-started.html
• https://reactjs.net/getting-started/aspnetcore.html