Hôm nay mình sẽ giới thiệu tới các bạn một số packages, development tools, toys không thể thiếu trong phát triển dự án sử dụng Reactjs, React native (Các dự án Front-End khác tương tự)
-
babel-plugin-module-alias
Chắc chắn một điều là bạn đã từng viết (có khi bây giờ vẫn còn đang viết) code để import một thư viện, function, component như dưới đây
import MyUtilFn from '../../../../utils/MyUtilFn';
Đây là cách import theo đường dẫn tương đối, vấn đề sẽ chẳng có gì nếu dự án của bạn nhỏ, thư mục phân cấp ít và quan trọng bạn phải có một trí nhớ tốt để có thể nhớ đc chính xác components, functions mình đang muốn import nó nằm cách file hiện tại bao nhiêu cái ../../.. :D. Với babel-plugin-module-alias giờ đây bạn chỉ cần viết
import MyUtilFn from 'utils/MyUtilFn';
Đơn giản hơn rất rất nhiều đúng không? Bạn chỉ cần quên mấy cái ký tự ../../ đi, việc còn lại để babel-plugin-module-alias lo 😀
Các sử dụng
$ npm install --save-dev babel babel-plugin-module-alias
Trong thư mục gốc của dự án, bạn sửa file .babelrc như dưới đây
{
"presets": ["react", "es2015", "stage-1"],
"plugins": [
["babel-plugin-module-alias", [
{ "src": "./client", "expose": "client" },
{ "src": "./public", "expose": "public" },
{ "src": "./client/actions", "expose": "actions" },
{ "src": "./client/components", "expose": "components" },
{ "src": "./client/constants", "expose": "constants" },
{ "src": "./client/containers", "expose": "containers" },
{ "src": "./client/middleware", "expose": "middleware" },
{ "src": "./client/reducers", "expose": "reducers" },
{ "src": "./client/components/buttons", "expose": "buttons" },
{ "src": "./client/components/modals", "expose": "modals" },
{ "src": "./client/pages", "expose": "pages" },
{ "src": "./client/utils", "expose": "utils" },
{ "src": "./client/src/scripts", "expose": "scripts" },
{ "src": "./client/src", "expose": "src" }
]]
],
}
Okie, ngon bây giờ bạn chỉ cần import các components, functions, actions blah blah theo alias đã được đặt tên bên trên bất kỳ ở file nào trong dự án
import ComponentA from 'components/ComponentA'; import ContainerB from 'containers/ContainerB'; import ActionA from 'actions/ActionA'; .... blah blah
“thấy hay đúng không? thấy hay thật thì like đi 😀 :” just 4 fun
2. babel-sublime-snippets (sublime text package)
Package này dùng cho sublime text, package này sẽ support bạn tạo nhanh một component react theo đúng best practice đc recommended theo Airbnb coding standard. Hiểu đơn gian package này sẽ tạo ra một cơ số những shortcut để support developer viết một react component nhanh và tiết kiệm thời gian với danh sách shortcut dưới đây:
| Trigger | Content |
|---|---|
rcc→ |
class component skeleton |
rcc→ |
legacy component skeleton |
cdm→ |
componentDidMount() {…} |
cdup→ |
componentDidUpdate(prevProps, prevState) {…} |
cwm→ |
componentWillMount() {…} |
cwr→ |
componentWillReceiveProps(nextProps) {…} |
cwun→ |
componentWillUnmount() {…} |
cwup→ |
componentWillUpdate(nextProps, nextState) {…} |
fdn→ |
React.findDOMNode(…) |
gdp→ |
getDefaultProps() {…} |
gis→ |
getInitialState() {…} |
ren→ |
render() {…} |
sst→ |
this.setState(…) |
scu→ |
shouldComponentUpdate(nextProps, nextState) {…} |
props→ |
this.props |
state→ |
this.state |
pt→ |
propTypes { ... } |
pta→ |
PropTypes.arrayOf |
ptai→ |
PropTypes.arrayOf (Instances) |
ptb→ |
PropTypes.bool |
pte→ |
PropTypes.element |
ptf→ |
PropTypes.func |
pti→ |
PropTypes.instanceOf |
ptn→ |
PropTypes.number |
ptn→ |
PropTypes.node |
pto→ |
PropTypes.object |
ptof→ |
PropTypes.oneOf (Enum) |
ptof→ |
PropTypes.objectOf |
ptoft→ |
PropTypes.oneOfType (Union) |
pts→ |
PropTypes.string |
ptsp→ |
PropTypes.shape |
