آموزشmaterial_ui

اموزش نصب Material-UI استفاده و کاربردها

اموزش نصب Material-UI استفاده و کاربردها

آموزش نصب، استفاده و کاربردهای Material-UI

 

React عناصر و مولفه های UI خاص خود را ندارد، اما شما می توانید از فریمورک UI شخص ثالث استفاده کنید. این فریمورک ها مجموعه‌ای از مولفه های مورد نیاز برای UI را فراهم می کنند.

Material-UI یکی از فریمورک های محبوب UI است که برای React طراحی شده است و شامل اجزای مختلف آماده برای ادغام است. هنوز هم اگر از یک وب‌پک(webpack) استفاده می کنید، هنگام استفاده از پیکربندی وب پک باید آن را نیز پیکربندی کنید. این راهنما نحوه استفاده از Material-UI و اجزای مختلف آن را که با وب پک پیکربندی شده نشان می دهد.

Material-Ui را نصب و شروع کنید

قدم اول جهت شروع Material-UI، نصب کردن آن با استفاده از دستور زیر است:

npm install @material-ui/core 1

بعد از اتمام نصب، مرحله بعدی وارد کردن مولفه کاربردی از Material_UI و استفاده از آن در هر مولفه React است. در این مثال از قابلیت Breadcrumbs استفاده می کنیم.

import Typography from ‘@material-ui/core/Typography’;

import Breadcrumbs from ‘@material-ui/core/Breadcrumbs’;

import Link from ‘@material-ui/core/Link’;

function App() {

return (

<div className=”App”>

<Breadcrumbs aria-label=”breadcrumb”>

<Link color=”inherit” href=”/”>

Parent Page

</Link>

<Link color=”inherit” href=”/”>

Child Page

</Link>

<Typography color=”textPrimary”>Current Page</Typography>

</Breadcrumbs>

</div>

);

}

export default App;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

فایل فوق، مولفه Breadcrumbs را از material-UI وارد کرده و از آن در عملکرد رندر استفاده می کند و به اجزای سازنده و مولفه جانبی بچه(child component) نیاز دارد. روش فوق ساده ترین راه برای شروع کار با Material-UI در کمترین زمان است. با این وجود، اگر از پیکربندی سفارشی وب پک استفاده می کنید، باید پیکربندی های اضافی را اعمال کنید.

با استفاده از وب پک، اجزای Material-UI را وارد کنید.

پیکربندی وب پک به حل ماژول ها براساس مسیری که از آن ارجاع می شود بستگی دارد. روشهای مختلفی برای نیاز به Material-UI یا سایر کتابخانه هایی از این دست وجود دارد و یکی از آنها رویکرد حل ماژول همراه با eslint است.

با استفاده از eslint، مسیر ماژول را مشخص کنید یا آن را به پیکربندی وب پک وارد کنید.

{

“rules”: {

“no-restricted-imports”: [

“error”,

{

“patterns”: [“@material-ui/*/*/*”]

}

]

}

}

1

2

3

4

5

6

7

8

9

10

پس از پیکربندی تنظیمات فوق، هر عبارتی که به صورت اشتباه وارد شود، به عنوان یک عبارت وارد شده اشتباه مشخص میشود.

اگر می خواهید افزونه های مختلفی را امتحان کنید، سایر پلاگین ها در دسترس هستند که شامل Material-UI و بسته های مربوط به آن هستند:

babel-plugin-import

babel-plugin-transform-imports

قبل از استفاده از کتابخانه های فوق، باید فایل .babelrc.js را در فهرست ریشه برنامه React خود ایجاد کنید.

.babelrx.js
const plugin = [

[

‘babel-plugin-transform-imports’,

{

‘@material-ui/core’: {

‘transform’: ‘@material-ui/core/${member}’,

‘preventFullImport’: true

}

}

]

];

module.exports = {plugin};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

مثال فوق کتابخانه @material-ui/core را وارد می کند و تحولاتی را برای وارد کردن اعضای بسته مانند دکمه، Breadcrumb و غیره را فراهم می کند.

import Breadcrumbs from ‘@material-ui/core/Breadcrumbs’; 1

تبدیل شدن واردات به شما کمک میکند تا به جای وارد کردن کل پکیج و حل ماژول خاص، به تنها قسمت ارزشمند ماژول نیاز داشته باشید.

import { Breadcrumbs } from ‘@material-ui/core’; 1

دستور بالا پکیج های کامل کتابخانه را وارد می کند و Breadcrumbs را در زمان تدوین برطرف می کند، بنابراین وقتی می خواهید تلاش های بسته بندی کلی را کاهش دهید، حل کننده ماژول مفید است.

برای حل دقیق مسیر داده شده نیز می توانید از webpack.resolve استفاده کنید.
module.exports = {

//…

resolve: {

alias: {

abcd$: path.resolve(__dirname, ‘path/to/file_name.js’)

}

}

};

1

2

3

4

5

6

7

8

9

10

با پیکربندی بالا مسیر ورودی به مسیر عادی تبدیل می شود.

import file1 from ‘folder1’; // Path resolved

import file2 from ‘folder2/file.js’; // Not matched and resolved

1

2

File1 یک عضو صادر شده از مکان پوشه 1 است. از این رو، بر اساس حل کننده مسیر مشخص شده برطرف می شود، و file2 حل نمی شود زیرا در تلاش است در برابر مسیر خاص حل شود.

نتیجه گیری

Material-UI یک چارچوب UI عالی برای برنامه های React است و استفاده از آن با وب پک به شما این امکان را میدهد تا با اجرای یک تنظیم کننده واردات سفارشی، اندازه بسته را به حداقل برسانید.

شما می توانید از کتابخانه های حل کننده ماژول مانند babel-plugin-transform-imports برای تعریف استانداردهایی محکم برای وارد کردن کتابخانه های خارجی و حل آنها بطور موثر استفاده کنید.

Description:

آموزش نصب و راه اندازی Material-UI، آموزش و کاربردهای Material_UI، مزایا و نحوه استفاده از Material-UI

بستن