반응이란 무엇입니까? 개미 디자인이란 무엇입니까?-프런트엔드 Q&A-php.cn

반응이란 무엇입니까? 개미 디자인이란 무엇입니까?

青灯夜游

풀어 주다： 2022-07-13 18:17:06

원래의

3583명이 탐색했습니다.

react는 사용자 인터페이스 구축을 위해 Facebook에서 출시한 JavaScript 개발 프레임워크로, 주로 UI를 구축하는 데 사용되므로 대화형 UI를 쉽게 만들 수 있습니다. Ant Design은 React를 기반으로 Alibaba Ant Financial 팀이 개발한 UI 구성 요소로 주로 TypeScript를 사용하여 구축되었으며 완전한 유형 정의 파일을 제공합니다.

반응이란 무엇입니까? 개미 디자인이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

리액트란 무엇인가요?

React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다. Facebook의 내부 프로젝트로 시작되었습니다. 회사는 시장에 있는 모든 JavaScript MVC 프레임워크에 만족하지 않았기 때문에 자체 프레임워크를 작성하기로 결정했습니다. 인스타그램 웹사이트. 만들고 나서 이 세트가 매우 유용하다는 것을 알게 되었고, 2013년 5월에 오픈 소스로 공개되었습니다.

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. React를 사용하면 짧고 독립적인 코드 조각을 복잡한 UI 인터페이스로 결합할 수 있습니다. 이러한 코드 조각을 "구성 요소"라고 합니다.

React의 디자인 아이디어는 매우 독특하고 혁명적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 따라서 앞으로 웹 개발의 주류 도구가 될 수 있다고 생각하며 주목하고 사용하는 사람들이 늘어나고 있습니다.

React는 데이터에 대한 HTML 보기를 제공하는 오픈 소스 JavaScript 라이브러리입니다. React 뷰는 일반적으로 사용자 정의 HTML 태그에 지정된 다른 구성 요소가 포함된 구성 요소를 사용하여 렌더링됩니다. React는 프로그래머에게 하위 구성 요소가 외부 구성 요소에 직접 영향을 미칠 수 없는 모델, 데이터 변경 시 HTML 문서에 대한 효율적인 업데이트, 최신 단일 페이지 애플리케이션의 구성 요소 간 명확한 분리를 제공합니다.

React를 사용하면 대화형 UI를 쉽게 만들 수 있습니다. 데이터가 변경될 때 React가 구성 요소를 효율적으로 업데이트하고 올바르게 렌더링할 수 있도록 앱의 모든 상태에 대한 간결한 보기를 디자인하세요. 구성 요소 로직은 템플릿이 아닌 JavaScript로 작성되므로 앱 주위로 데이터를 쉽게 전달하고 DOM과 상태를 별도로 유지할 수 있습니다.

React의 특징

선언적 디자인: React는 선언적 패러다임을 채택하여 애플리케이션을 쉽게 설명할 수 있습니다.
효율성: React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.
유연성: React는 알려진 라이브러리나 프레임워크와 잘 작동합니다.
JSX: JSX는 JavaScript 구문의 확장입니다. JSX는 React 개발에 필수는 아니지만 권장됩니다.
컴포넌트: React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다.
단방향 응답 데이터 흐름: React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄이므로 기존 데이터 바인딩보다 간단합니다.

React를 마스터하면 프런트 엔드 애플리케이션 개발을 처리하는 데 도움이 될 뿐만 아니라 프로그래밍 아이디어는 React Native 앱 개발 및 서버 측 렌더링의 백엔드 개발에도 적용될 수 있습니다. 따라서 프론트 엔드 개발에 종사하든 아니든 React를 배우는 것은 기술과 경력 개발을 향상시키는 데 큰 도움이 될 것입니다.

앤트 디자인이란 무엇인가요?

Ant Design은 Alibaba Ant Financial 팀이 React를 기반으로 개발한 UI 컴포넌트로 주로 미드엔드와 백엔드 시스템에서 사용됩니다.

공식 홈페이지 : https://ant.design/index-cn

특징 :

엔터프라이즈급 중견기업의 인터랙티브 언어와 비주얼 스타일에서 추출 백엔드 제품.
즉시 사용 가능한 고품질 React 구성요소.
TypeScript를 사용하여 구축되어 완전한 유형 정의 파일을 제공합니다.
풀 링크 개발 및 설계 도구 시스템.

시작하기

Ant Design 소개

Ant Design은 엔터프라이즈급 제품을 제공하는 디자인 시스템입니다. 구성 요소 라이브러리는 편의를 위해 React 구현입니다. 개발자의 설치 및 사용.

개발에 npm이나 Yarn을 사용할 수 있습니다. 개발 환경에서 쉽게 디버깅할 수 있을 뿐만 아니라 프로덕션 환경에서도 안전하게 패키징하고 배포할 수 있어 전체 생태계와 도구 체인이 제공하는 많은 이점을 누릴 수 있습니다.

$ npm install antd --save
$ yarn add antd

로그인 후 복사

umi에서는 플러그인 세트 umi-plugin-react에서 antd를 구성하여 antd 플러그인을 열 수 있습니다. antd 플러그인은 antd를 도입하고 주문형 컴파일을 구현하는 데 도움이 됩니다.

config.js 파일에서 구성:

export default {
    plugins: [
        [&#39;umi-plugin-react&#39;, {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

로그인 후 복사

사용해 보세요

다음으로 탭 구성 요소를 예로 들어 antd 구성 요소를 사용하기 시작합니다. 주소: https://ant.design/comComponents / tabs-cn/
Effect:

반응이란 무엇입니까? 개미 디자인이란 무엇입니까?

공식 예제를 참고하여 사용하고 MyTabs.js 파일을 생성하세요:

import React from &#39;react&#39;
import {Tabs} from &#39;antd&#39;

const TabPane = Tabs.TabPane;
const callback = (key) => { console.log(key);
}

class MyTabs extends React.Component {
    render() {
        return (
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
            </Tabs>
        )
    }
}
export default MyTabs;

로그인 후 복사

Effect:

반응이란 무엇입니까? 개미 디자인이란 무엇입니까?