React는 사용자 인터페이스 구축을 위해 Facebook에서 출시한 JavaScript 개발 프레임워크로 주로 UI를 구축하는 데 사용되어 대화형 UI를 쉽게 만들 수 있습니다. Ant Design은 React를 기반으로 Alibaba Ant Financial 팀이 개발한 UI 구성 요소로 주로 TypeScript를 사용하여 구축되었으며 완전한 유형 정의 파일을 제공합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, React18 버전, Dell G3 컴퓨터.
반응이란 무엇입니까?
React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다. Facebook의 내부 프로젝트에서 시작되었습니다. 회사는 시장에 있는 모든 JavaScript MVC 프레임워크에 만족하지 않았기 때문에 Instagram 웹 사이트를 구축하기 위해 자체 프레임워크를 작성하기로 결정했습니다. 만들고 나서 이 세트가 매우 유용하다는 것을 알게 되었고, 2013년 5월에 오픈 소스로 공개되었습니다.
React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. React를 사용하면 짧고 독립적인 코드 조각을 복잡한 UI 인터페이스로 결합할 수 있습니다. 이러한 코드 조각을 "구성 요소"라고 합니다.
React의 디자인 아이디어는 매우 독특하고 혁명적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 따라서 앞으로 웹 개발의 주류 도구가 될 수 있다고 생각하면서 점점 더 많은 사람들이 관심을 갖고 사용하기 시작하고 있습니다.
React는 HTML로 렌더링되는 데이터 보기를 제공하는 오픈 소스 JavaScript 라이브러리입니다. React 뷰는 일반적으로 사용자 정의 HTML 마크업에 지정된 다른 구성 요소를 포함하는 구성 요소를 사용하여 렌더링됩니다. React는 프로그래머에게 하위 구성 요소가 외부 구성 요소에 직접 영향을 미칠 수 없는 모델, 데이터 변경 시 HTML 문서에 대한 효율적인 업데이트, 최신 단일 페이지 애플리케이션의 구성 요소 간 명확한 분리를 제공합니다.
React를 사용하면 대화형 UI를 쉽게 만들 수 있습니다. 데이터가 변경될 때 React가 구성 요소를 효율적으로 업데이트하고 올바르게 렌더링할 수 있도록 앱의 모든 상태에 대한 간결한 보기를 디자인하세요. 구성 요소 로직은 템플릿이 아닌 JavaScript로 작성되므로 애플리케이션 주위로 데이터를 쉽게 전달하고 DOM과 상태를 별도로 유지할 수 있습니다.
특징
선언적 디자인: React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.
효율성: React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.
유연성: React는 알려진 라이브러리나 프레임워크와 잘 작동합니다.
JSX: JSX는 JavaScript 구문의 확장입니다. React 개발이 반드시 JSX를 사용할 필요는 없지만 권장합니다.
컴포넌트: React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다.
단방향 응답 데이터 흐름: React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄이므로 기존 데이터 바인딩보다 간단합니다.
React를 마스터하면 프런트 엔드 애플리케이션 개발을 처리하는 데 도움이 될 뿐만 아니라 프로그래밍 아이디어는 React Native 네이티브 앱 개발 및 서버 측 렌더링의 백엔드 개발에도 적용될 수 있습니다. 따라서 프론트엔드 개발에 종사하든 아니든 React를 배우는 것은 기술 향상과 경력 개발에 큰 도움이 될 것입니다.
개미 디자인이란 무엇입니까?
Ant Design은 Alibaba Ant Financial 팀이 React를 기반으로 개발한 UI 컴포넌트로 주로 미드엔드 및 백엔드 시스템에서 사용됩니다.
공식 홈페이지: https://ant.design/index-cn
특성:
엔터프라이즈급 미드엔드, 백엔드 제품에서 추출한 인터랙티브 언어와 비주얼 스타일입니다.
즉시 사용할 수 있는 고품질 React 구성 요소입니다.
TypeScript를 사용하여 구축되었으며 완전한 유형 정의 파일을 제공합니다.
풀링크 개발 및 설계 도구 시스템.
시작하기
Ant Design 소개
Ant Design은 엔터프라이즈 수준의 제품을 제공하는 디자인 시스템입니다. antd는 개발자가 설치하고 사용할 수 있도록 npm 패키지로 게시됩니다.
개발에 npm 또는 원사를 사용할 수 있습니다. 개발 환경에서 쉽게 디버깅할 수 있을 뿐만 아니라 프로덕션 환경에서도 안전하게 패키징하고 배포할 수 있어 전체 생태계와 도구 체인이 제공하는 많은 이점을 누릴 수 있습니다.
$ npm install antd --save$ 얀 추가 antdumi에서는 플러그인 세트 umi-plugin-react에서 antd를 구성하여 antd 플러그인을 열 수 있습니다. antd 플러그인은 antd를 도입하고 주문형 컴파일을 구현하는 데 도움이 됩니다.
config.js 파일에서 구성합니다.
내보내기 기본값 { 플러그인: [ ['umi-plugin-react', { dva: true, // dva 기능 활성화 antd: true // Ant 디자인 기능 활성화}] ]};당신의 능력을 테스트해보세요
다음으로 탭 구성 요소를 예로 들어 antd 구성 요소를 사용하기 시작합니다. 주소는 https://ant.design/comComponents/tabs-cn/입니다. 효과:
공식 예제를 참조하여 사용하고 MyTabs.js 파일을 만듭니다.
import React from 'react'import {Tabs} from 'antd'const TabPane = Tabs.TabPane;const 콜백 = (key) => { console.log(key);}class MyTabs 확장 React.Component { render() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1">탭 창 1의 내용</TabPane> <TabPane tab="Tab 2" key="2" >탭 창 2의 내용</TabPane> <TabPane tab="Tab 3" key="3">탭 창 3의 내용</TabPane> </Tabs> ) }}기본 MyTabs 내보내기;효과:
이 시점에서 우리는 antd 구성 요소의 기본 사용법을 마스터했습니다.