React 의미 사용자 인터페이스 초보자 강좌
설치 및 설정
우리는 우리의 응용 프로그램을 위해 react semantic ui 라이브러리를 사용할 것입니다. 이 라이브러리는react 응용 프로그램에서 사용하는 의미 ui의 포장기입니다.
create-react-app을 사용하여react 응용 프로그램을 만들 것입니다npx creat-react-app react-semantic-recipe
npm install semantic-ui-react semantic-ui-css
index.js에서 의미 ui를 가져오는 cssimport "semantic-ui-css/semantic.min.css"
의미 uireact 응용 프로그램 구축
의미 ui를 사용하여react 응용 프로그램을 구축하는 방법을 알아보십시오.우리는 MealDB API을 사용하여 설계도 응용 프로그램을 구축할 것이다
reactjs 의미 ui 프레임
기능
프레젠테이션
이 강좌에서reactjs의 의미 ui를 사용하여 이러한 응용 프로그램을 구축하는 방법을 보여 줍니다.
우선, 우리는 프레임워크를react 구성 요소로 분해하여 응용 프로그램에서 그것을 실현합니다.
왼쪽 화면에서 검색과 필터 기능이 있습니다.그리고 우리는 축소 이미지와 식사 디테일을 표시하는 카드를 가지고 있다.
구성 요소에는 카드, 입력 및 드롭다운 구성 요소가 포함됩니다.
App.js에 다음 코드 추가import React, { useState, useEffect, Fragment } from "react"
import "./App.css"
import {
Container,
Input,
Button,
Dropdown,
Loader,
Dimmer,
Card,
} from "semantic-ui-react"
import { useQuery } from "react-query"
function App() {
const [currentCategory, setCurrentCategory] = useState(0)
const [selectedMealId, setSelectedMealId] = useState(null)
const { isLoading, error, data: categories } = useQuery(
"categories",
async () => {
let result = await fetch(
"https://www.themealdb.com/api/json/v1/1/categories.php"
).then(res => res.json())
result = result.categories.map(item => {
return {
key: item.idCategory,
text: item.strCategory,
value: item.idCategory,
image: item.strCategoryThumb,
}
})
return result
}
)
const { data: meals } = useQuery(
["meals", currentCategory, categories],
async (key, currentCategory, data) => {
let result = await fetch(
`https://www.themealdb.com/api/json/v1/1/filter.php?c=${data[currentCategory].text}`
).then(res => res.json())
return result.meals
},
{
enabled: categories,
}
)
if (isLoading)
return (
<Dimmer active inverted>
<Loader inverted content="Loading" />
</Dimmer>
)
return (
<Container className="container" textAlign="center">
// Container Logic comes Here
</Container>
)
}
export default App
Container이 있습니다.그 다음으로 우리는 mealdb API에서 식사와 분류 데이터를 얻는다.API에서 react-query을 사용하여 데이터를 가져옵니다.
데이터를 얻을 때, 우리는 구성 요소 내부에 캐리어를 표시해야 한다.이를 위해, 우리는 의미 ui의
Loader을 사용할 것이다.if (isLoading)
return (
<Dimmer active inverted>
<Loader inverted content="Loading" />
</Dimmer>
)
우선 검색 표시줄과 분류 필터를 실현합시다.
<div className="row">
<Input
className="search-input"
size="large"
value={searchTerm}
onChange={onSearchChange}
placeholder="Search Meal"
/>
<Button onClick={onSearch} secondary>
Search
</Button>
<Dropdown
className="drop-down"
placeholder="Filter Category"
fluid
search
selection
value={categories[currentCategory].value}
onChange={(e, { value }) => {
setCurrentCategory(value[0] - 1)
}}
options={categories}
/>
</div>
반응 의미 사용자 인터페이스 입력
여기서 우리는 의미 사용자 인터페이스의
Input을 검색 입력으로 사용합니다.우리는 입력한 행동을 바꾸기 위해 다른 도구를 추가할 수 있다.focus - 입력 상자 loading - 입력 상자 disabled - 입력 편집 옵션을 사용할 수 없습니다.error- 검증 오류를 보여 줍니다.icon - 입력 상자에 아이콘을 추가합니다.반응 의미 ui 단추
이후 검색 기능에 사용할 단추를 추가했습니다.기본 단추 동작을 바꿀 수 있는 의미 사용자 인터페이스의 중요한 도구들을 살펴보자.
primary - 버튼의 색상을 원색으로 변경합니다.secondary - 버튼 색상을 보조 색상으로 변경합니다.active - 버튼 활성화 상태를 표시합니다.disabled - 버튼 비활성화 상태를 표시합니다.loading- 단추에 로더를 추가할 수 있습니다. 이것은 진도나 API 호출을 표시하는 좋은 방법입니다.react 의미 ui 드롭다운 목록
의미 사용자 인터페이스는 아래 목록에 많은 변화를 추가했다.몇 가지 중요한 옵션은 검색 가능한 드롭다운 목록, 다중 선택, 지우기 옵션입니다.
search - 기본 드롭다운 목록을 검색할 수 있습니다.multiple - 기본 드롭다운 메뉴를 다중 선택 메뉴로 만듭니다.clearable- 선명하게 아래로 내려갈 수 있습니다.MealCard/index.js을 만들고 다음 코드를 추가하여 의미 UI 카드를 만듭니다.import React from "react"
import { Card, Image, Icon, Grid } from "semantic-ui-react"
const MealCard = ({ imageUrl, title, onClick }) => {
return (
<Card onClick={onClick}>
<Image src={imageUrl} wrapped ui={false} />
<Card.Content>
<Card.Header>{title}</Card.Header>
</Card.Content>
</Card>
)
}
export default MealCard
일단 이 구성 요소를 실현하면우리는
App.js 내부에서 그것을 사용할 수 있다.{
meals &&
meals.map(meal => {
return (
<MealCard
title={meal.strMeal}
onClick={() => {
console.log("meal.idMeal", meal.idMeal)
setSelectedMealId(meal.idMeal)
}}
imageUrl={meal.strMealThumb}
/>
)
})
}
meals을 순환하고 MealCard을 나타냅니다.현재, 우리는 이미 카드에서 우리의 음식을 제공했다.사용자가 카드를 눌렀을 때, 우리는 이 식사에 대한 모든 세부 사항을 표시해야 한다.
구성 요소
MealDetails/index.js 내외 구성 요소 디렉터리에서 이러한 기능을 실현합시다.import React from "react"
import { useQuery } from "react-query"
import {
Container,
Input,
Button,
Dropdown,
Loader,
Dimmer,
Header,
Grid,
} from "semantic-ui-react"
const MealDetails = ({ mealId, onBackButtonClick }) => {
const { isLoading, error, data: meals } = useQuery(
["categories", mealId],
async (key, mealId) => {
console.log("mealId", mealId)
let result = await fetch(
`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealId}`
).then(res => res.json())
console.log("result", result)
return result.meals
}
)
if (isLoading)
return (
<Dimmer active inverted>
<Loader inverted content="Loading" />
</Dimmer>
)
if (meals) {
console.log("meals", meals)
}
return (
<Container>
<Button secondary onClick={onBackButtonClick}>
Back
</Button>
<h4>{meals[0].strMeal}</h4>
<Grid divided="vertically">
<Grid.Row columns={2}>
<Grid.Column>
<Header as="h3">Category:</Header>
</Grid.Column>
<Grid.Column>
<p>{meals[0].strCategory}</p>
</Grid.Column>
</Grid.Row>
<Grid.Row columns={2}>
<Grid.Column>
<Header as="h3">Instruction:</Header>
</Grid.Column>
<Grid.Column>
<p>{meals[0].strInstructions}</p>
</Grid.Column>
</Grid.Row>
<Grid.Row columns={2}>
<Grid.Column>
<Header as="h3">Source:</Header>
</Grid.Column>
<Grid.Column>
<a href={meals[0].strSource}>Source</a>
</Grid.Column>
</Grid.Row>
<Grid.Row columns={2}>
<Grid.Column>
<Header as="h3">Video:</Header>
</Grid.Column>
<Grid.Column>
<a href={meals[0].strYoutube}>Video</a>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
)
}
export default MealDetails
mealId과 후퇴 버튼 클릭 기능을 아이템으로 가지고 있습니다.mealId를 기반으로 세부 사항을 보여줘야 합니다.우리는 의미 UI 격자를 사용하여 데이터를 표시합니다.만약 네가 테두리를 본다면, 우리는 왼쪽에 속성 이름이 있고, 오른쪽에 값이 있다.
예를 들어, 명령 키는 왼쪽에 있고 값은 오른쪽에 있습니다.
웹 응용 프로그램에서 격자를 사용하여 모든 종류의 정렬을 할 수 있습니다.
반응 의미 ui 격자
react 의미 ui 격자 개념은 간단합니다.행과 열이 있습니다.줄의 열 수만 지정하고
Grid.Column에 구성 요소를 추가하면 됩니다.예:
<Grid.Row columns={2}>
<Grid.Column>
<Header as="h3">Category:</Header>
</Grid.Column>
<Grid.Column>
<p>{meals[0].strCategory}</p>
</Grid.Column>
</Grid.Row>
Grid.Column에 구성 요소 헤더를 추가합니다.react 의미 ui 헤더는 직접적입니다.그래서 나는 그것을 너희들에게 남겨 두고 실현할 것이다.
이제
App.js에 구성 요소를 추가해야 합니다.이 기능을 실현할 수 있는 두 가지 방법이 있다.App.js에서 식사 디테일 구성 요소를 조건적으로 보여줄 수 있습니다.우리의 마지막
App.js은 보기에import React, { useState, useEffect, Fragment } from "react"
import "./App.css"
import {
Container,
Input,
Button,
Dropdown,
Loader,
Dimmer,
Card,
} from "semantic-ui-react"
import { useQuery } from "react-query"
import MealCard from "./components/MealCard"
import MealDetails from "./components/MealDetails"
function App() {
const [currentCategory, setCurrentCategory] = useState(0)
const [selectedMealId, setSelectedMealId] = useState(null)
const [searchTerm, setSearchTerm] = useState("")
const [isSearch, setSearch] = useState(false)
const { isLoading, error, data: categories } = useQuery(
"categories",
async () => {
let result = await fetch(
"https://www.themealdb.com/api/json/v1/1/categories.php"
).then(res => res.json())
result = result.categories.map(item => {
return {
key: item.idCategory,
text: item.strCategory,
value: item.idCategory,
image: item.strCategoryThumb,
}
})
return result
}
)
const { data: meals } = useQuery(
["meals", currentCategory, categories],
async (key, currentCategory, data) => {
let result = await fetch(
`https://www.themealdb.com/api/json/v1/1/filter.php?c=${data[currentCategory].text}`
).then(res => res.json())
return result.meals
},
{
enabled: categories,
}
)
const { data: searchResults } = useQuery(
["searchMeals", isSearch, searchTerm],
async (key, isSearch, searchTerm) => {
if (isSearch) {
let result = await fetch(
`https://www.themealdb.com/api/json/v1/1/search.php?s=${searchTerm}`
).then(res => res.json())
console.log("result", result)
return result.meals
} else {
return []
}
}
)
const onSearch = () => {
setSearch(true)
}
const onSearchChange = e => {
setSearchTerm(e.target.value)
}
if (isLoading)
return (
<Dimmer active inverted>
<Loader inverted content="Loading" />
</Dimmer>
)
return (
<Container className="container" textAlign="center">
{selectedMealId ? (
<MealDetails
mealId={selectedMealId}
onBackButtonClick={() => setSelectedMealId(null)}
/>
) : (
<Fragment>
<div className="row">
<Input
className="search-input"
size="large"
value={searchTerm}
onChange={onSearchChange}
placeholder="Search Meal"
/>
<Button onClick={onSearch} secondary>
Search
</Button>
<Dropdown
className="drop-down"
placeholder="Filter Category"
fluid
search
selection
value={categories[currentCategory].value}
onChange={(e, { value }) => {
setCurrentCategory(value[0] - 1)
}}
options={categories}
/>
</div>
<Container className="container" textAlign="center">
<Card.Group itemsPerRow={4}>
{searchTerm && isSearch ? (
searchResults &&
searchResults.map(meal => {
return (
<MealCard
title={meal.strMeal}
onClick={() => {
console.log("meal.idMeal", meal.idMeal)
setSelectedMealId(meal.idMeal)
}}
imageUrl={meal.strMealThumb}
/>
)
})
) : (
<Fragment>
{meals &&
meals.map(meal => {
return (
<MealCard
title={meal.strMeal}
onClick={() => {
console.log("meal.idMeal", meal.idMeal)
setSelectedMealId(meal.idMeal)
}}
imageUrl={meal.strMealThumb}
/>
)
})}
</Fragment>
)}
</Card.Group>
</Container>
</Fragment>
)}
</Container>
)
}
export default App
Reference
이 문제에 관하여(React 의미 사용자 인터페이스 초보자 강좌), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ganeshmani/react-semantic-ui-tutorial-for-beginners-1j5b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
