Goal
Giới thiệu việc sử dụng Component có sẵn cho Reactjs.Reusalbe Components
“When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.”– facebook –
Lược dịch:
Khi design giao diện, hãy break down những design elements như button, form fields, layout components, v.v… thành các components có thể tái sử dụng và well-defined interfaces (I/F của components). Với cách này, bạn không cần tốn nhiều thời gian cho lần tạo giao diện tiếp theo. Nghĩa là thời gian phát triển nhanh hơn, ít bug hơn, và giảm bớt wire.
Tìm React Component ở đâu?
Bạn có thể tìm kiếm các React Component ở site bên dưới này.ReactComponent
Đây là site tập hợp các ReactComponent.http://react-components.com/
React Rocks
http://react.rocks/Github wiki
https://github.com/facebook/react/wiki/Complementary-Tools#ui-componentsThử sử dụng một ReactComponent
Hiện tại trên trang http://react-components.com/, tôi sẽ thử sử dụng một Component phổ biến nhất là material-ui để tạo giao diện cho demo Avatar.Source code:
https://github.com/phungnc/reactjs-tut-demo/tree/feature/material-ui-component/material-ui-component
Trong source code mới này:
1. Vì material-ui đã có Componet Avatar, nên tôi sẽ đổi trên các Component trong demo trước từ Avatar thành Member.
2. Các file
delete.jsx, toggle-star.jsx là các Icon Component tôi download từ https://github.com/callemall/material-ui/tree/master/src/svg-icons 3. Tôi vẫn dùng Browserify cho nên bạn vẫn phải dùng lệnh
browserify -t reactify avatar.jsx > bundle.js để bundle up file bundle.js. 4. Khi thực hiện browserify nếu xảy ra lỗi thiếu module nào thì hãy install module đó.