React 응용 프로그램에 재료 UI 라이브러리를 통합하는 방법
26703 단어 reactwebdevbeginnersjavascript
이 글은 npm 모듈로 제공되는 재료 라이브러리를 어떻게 통합하는지 보여 줍니다. 이 재료 라이브러리는 응용 프로그램 구축에 사용할 수 있는 내장된 React 구성 요소로 구성되어 있습니다.이 라이브러리를 설치하고 설정하는 방법과 소형 프레젠테이션 프로그램을 구축하는 방법을 처음부터 배울 것입니다.
선결 조건
이 강좌를 시작하기 전에 다음이 필요합니다.
Chrome, Firefox 등 브라우저
12.x.x 이상create-react-app 또는 npx을 통해 액세스새 React 응용 프로그램 만들기
먼저 React 항목을 설정해야 합니다.
npx을 사용하여 이 작업을 수행합니다.터미널 창에서 다음 명령을 실행합니다.npx create-react-app reactmaterial
npx 명령(노드 패키지 관리자(npm)의 일부분)을 사용하여 create-react-app을 실행할 수 있으며 전역적으로 패키지를 다운로드하고 설치할 필요가 없습니다.새 프로젝트가 완료되면 기본 의존 항목 (예: React library 및 React DOM library) 이 설치됩니다.
새 디렉터리에서 변경하면 다음 파일과 폴더 구조가 환영을 받을 것입니다.
React 응용 프로그램이 정상적으로 작동하는지 확인하려면 (이 절차를 완전히 건너뛸 수 있습니다) 터미널 창에서
yarn start을 실행하고 브라우저 창에서 기본 React 응용 프로그램을 엽니다. 실행 속도는 http://localhost:3000입니다.
재료 UI 라이브러리 설치
다음은 Material UI 라이브러리를 설치하고 현재 React 응용 프로그램에 통합하는 것입니다.첫 번째는 이 라이브러리의 핵심 의존항을 설치하는 것이다.
yarn add @material-ui/core
yarn add typeface-roboto
// rest of the import statements
import 'typeface-roboto';
AppBar를 사용하여 사용자 정의 탐색 모음 만들기
이 절에서, 우리는 내비게이션 표시줄을 구축합시다.
./src/index.js이라는 새 파일을 만듭니다. 먼저 MaterialUI 라이브러리에서 구성 요소 ./src/components/Navbar.js, AppBar 및 ToolBar을 가져옵니다.Typography 구성 요소는 웹 응용 프로그램의 브랜드, 화면 제목, 내비게이션을 표시하는 데 사용됩니다.이것이 바로 네가 그것을 사용하려는 목적이다.AppBar 구성 요소는 포장기입니다. 구성 요소를 수평으로 배치할 수 있습니다.ToolBar 구성 요소는 기본적으로 사용할 수 있는 재료 UI 테마를 적용합니다.import React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core';
Typography이라는 함수 어셈블리를 내보냅니다.export default function Navbar() {
return (
<AppBar>
<Toolbar>
<Typography variant='h6'>React and Material-UI App</Typography>
</Toolbar>
</AppBar>
);
}
Navbar 구성 요소의 variant 속성을 주의하십시오.이것은 변수 매핑을 사용하여 UI 요소를 HTML 의미 요소(예를 들어 코드 세그먼트의 h6)와 정확하게 연결합니다.이제 실제 작업을 보려면
Typography 파일에서 Navbar 구성 요소를 가져옵니다.import React from 'react';
import Navbar from './components/Navbar';
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
용지 어셈블리 구현
이 절에서 레이아웃 목록 항목의 보기에 사용되는 두 구성 요소는 각각
App.js과 Grid이라고 한다.Material Design의 응답 사용자 인터페이스는 12열 메쉬 레이아웃을 기반으로 합니다.
Paper 구성 요소는 이 레이아웃 시스템을 실현하고 표시할 값이나 격자 수를 제공합니다.기본 격자선은 다음과 같습니다.
재료 UI는 CSS의 Flexbox를 사용하여 배치 정렬과 격자선 열 크기를 관리합니다.
다른 구성 요소
Grid은 실제로 화면에 종이의 물리적 특성을 표시합니다.이것은 종이 한 장의 평면 무늬와 유사하며, Paper이라는 도구를 사용하면 기본 표시 행위를 조종할 수 있다.이 구성 요소는 확실히 초기 너비와 높이가 필요합니다.elevation이라는 새 구성 요소 파일을 만듭니다. 이 파일은 나중에 다시 사용할 수 있는 구성 요소로 사용됩니다.이것은 구성 요소가 ./src/components/List.js 내부에 사용자 정의 스타일을 가진 Paper 구성 요소를 표시합니다.import React from 'react';
import { Grid, Paper, makeStyles } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
root: {
marginTop: 100,
flexGrow: 1
},
paper: {
height: 220,
width: 340,
backgroundColor: '#ebebeb'
},
avatarImage: {
width: 200,
height: 200,
borderRadius: 100
}
}));
export default function List() {
const classes = useStyles();
return (
<Grid container spacing={2}>
<Grid item className={classes.root} xs={12}>
<Grid container justify='center' spacing={2}>
<Grid key={1} item>
<Paper className={classes.paper} elevation={2} />
</Grid>
</Grid>
</Grid>
</Grid>
);
}
Grid은 재료 UI API에서 제공됩니다.이것은 스타일시트를 함수 구성 요소와 연결하고 구성 요소 내부에서 사용하는 갈고리를 되돌려줍니다.makeStyles 파일을 수정하여 App.js 구성 요소를 포함할 수 있습니다.// rest of the import statements
import List from './components/List';
function App() {
return (
<div>
<Navbar />
<List />
</div>
);
}
랜덤 사용자 데이터 가져오기
List 구성 요소의 데이터를 표시하기 위해 https://randomuser.me/ API를 사용합니다.List 구성 요소에서 App 갈고리를 사용하여 초기 렌더링에서 데이터를 가져옵니다.useEffect 갈고리는 초기 값을 공수조로 정의하는 상태 변수를 통해 추출된 데이터를 저장하는 데 사용됩니다.먼저
useState 라이브러리에서 갈고리를 가져옵니다.import React, { useState, useEffect } from 'react';
react 어셈블리에 data이라는 상태 변수를 생성합니다.App 변수와 함께 응용 프로그램이 로드 모드 (즉 API에서 데이터를 추출하는 중), data에서 데이터를 추출하는 데 오류가 있는지 추적하는 데 사용되는 두 가지 상태 변수를 정의합니다.기본적으로 React 응용 프로그램의 로드 상태는 isLoading입니다.function App() {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState('');
//rest of the code
}
error 갈고리에 리셋이 있습니다. 이 리셋은 자바스크립트의 true API를 사용하여 데이터를 가져옵니다.useEffect(() => {
fetch('https://randomuser.me/api/?results=5')
.then(res => res.json())
.then(
result => {
setIsLoading(false);
setData(result.results);
},
error => {
setIsLoading(false);
setError(error);
}
);
}, []);
if (isLoading) {
return <div>Loading ...</div>;
} else if (error) {
return <div>There is an error fetching data.</div>;
} else {
return (
<div>
<Navbar />
<List />
</div>
);
}
사용자 목록 표시
현재
useEffect 구성 요소에 표시할 사용자 정보를 도구로 전달할 수 있습니다.JavaScript의 fetch 함수를 사용하여 배열 List을 반복합니다.{
data.map(item => (
<List
key={item.id.value}
userAvatar={item.picture.large}
firstName={item.name.first}
lastName={item.name.last}
/>
));
}
map 구성 요소에 전달합니다.xport default function List({ userAvatar, firstName, lastName }) {
const classes = useStyles();
return (
<Grid container spacing={2}>
<Grid item className={classes.root} xs={12}>
<Grid container justify="center" spacing={2}>
<Grid key={1} item>
<Paper className={classes.paper} elevation={2}>
<Grid container justify="center">
<Avatar
alt="User"
className={classes.avatarImage}
src={userAvatar}
/>
<Typography variant="p">
Name: {firstName} {lastName}
</Typography>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
);
}
data)를 사용합니다.너는 이 도서관의 공식 문서에서 그들의 참고 자료를 찾을 수 있다.이것은 브라우저 화면으로 돌아갈 때 얻을 수 있는 최종 결과입니다.
결론
이 글에서 React 응용 프로그램에서 Material UI library의 핵심 구성 요소를 어떻게 활용하고 대량의 개발 시간을 절약하는지 알 수 있기를 바랍니다.
참고 문헌:
Random User API은 React 응용 프로그램의 데이터
Reference
이 문제에 관하여(React 응용 프로그램에 재료 UI 라이브러리를 통합하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/amanhimself/how-to-integrate-material-ui-library-in-react-apps-270p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
