Tìm hiểu về Material UI

I. Material UI là gì?

Material UI là một thư viện các React Component đã được tích hợp thêm cả Google's Material Design. Theo như giới thiệu trên trang chủ thì được xây dựng nhờ tình cảm với React và Google's Material Design =)) Do đó mà phần hướng dẫn trên trang chủ của Material UI cũng đã nói nên sử dụng Material UI với React.

Material UI đem đến cho bạn và trang web của bạn một giao diện hoàn toàn mới, với những button, textfield, toogle... được design theo một phong cách mới lạ, thay vì việc nhà nhà người người dùng Bootstrap như hiện nay.

Trang web giới thiệu, hướng dẫn sử dụng, cài đặt... Material UI: http://material-ui.com/

II. Cài đặt và sử dụng Material UI

Cài đặt bằng npm rất đơn giản chỉ với một câu lệnh:
npm install material-ui
Và để sử dụng cũng rất đơn giản chỉ cần 1 dòng require:

  var mui = require("material-ui");

III. Sử dụng theme trong Material UI

Có 2 theme cơ bản trong Material UI là light-theme và dark-theme. Light theme cho trang web của bạn phông nền trắng còn ngược lại dark-theme sẽ là phồng nền đen. Bắt đầu từ phiên bản v0.8.0 thì việc khai báo sử dụng theme là bắt buộc đối bới Material UI thế nên bạn cần phải thêm dòng code dưới đây vào file JS của bạn.

var React = require('react');
var mui = require('mui');
var ThemeManager = new mui.Styles.ThemeManager();

class OuterMostParentComponent extends React.Component {
  // Important!
  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  }
};

// Important!
OuterMostParentComponent.childContextTypes = {
  muiTheme: React.PropTypes.object
};

module.exports = OuterMostParentComponent;

Material UI cũng cung cấp cho bạn khả năng customize lại theme. Để tìm hiểu kĩ hơn thì các bạn có thể vào link dưới đây:
http://material-ui.com/#/customization/themes

IV. Sử dụng các Component

Sau khi khai báo ở trên thì việc sử dụng các Component rất đơn giản. Cần Component nào thì chỉ việc gọi var Component = mui.Component. Tất nhiên là tên Component thì bạn phải xem trên docs của Material UI rồi. Với trên 20 components thì có lẽ là đủ cho trang web của bạn. Ví dụ để gọi TextField và Button thì bạn làm như sau:

var React = require("react");
var mui = require("material-ui");
var TextField = mui.TextField;
var FlatButton = mui.FlatButton;

var MuiTest = React.createClass({
  render: function() {
    return (
      <div>
        <TextField defaultValue="Default Value" />
        <FlatButton label="ADD IMAGE URL" primary={true}/>
      </div>
    );
  }
});

module.exports = MuiTest;

V. Ý kiến cá nhân

Tất nhiên về cái đẹp thì tùy ý kiến cá nhân của mỗi người nhưng theo mình thì Material UI đẹp trai hơn, mặc dù giao diện khá giống với 1 ROM nào đấy trên Android đã từng dùng (không nhớ tên (?) ), không biết thằng nào copy thằng nào =))

Còn về chức năng, hiện tại mình cũng đang dùng thằng react-bootstrap cũng là sản phẩm của các thanh niên nào đấy viết để có thể sử dụng các Component Boostrap trên React 1 cách đơn giản. Tuy nhiên vì react-bootstrap còn chưa hoàn thiện nên vẫn còn khá nhiều lỗi trong việc bắt event và handle event, cũng như thiếu 1 vài component. Về mặt này thì Material UI đảm bảo hơn do cung cấp bộ option cũng như event cho các component hoàn hảo và đầy đủ hơn.

Dưới đây là link source demo nhỏ của mình với Material UI. Có sử dụng 1 vài component Button, TextField, LinearProgress, Toogle của Material UI
https://github.com/linuxhjkaru/react-flux-image-gallery