React — это среда разработки JavaScript, запущенная Facebook для создания пользовательских интерфейсов. Она в основном используется для создания пользовательских интерфейсов, что упрощает создание интерактивных пользовательских интерфейсов. Ant Design — это компонент пользовательского интерфейса, разработанный командой Alibaba Ant Financial на основе React. Он в основном используется для промежуточных и серверных систем. Он создан с использованием TypeScript и предоставляет полный файл определения типа.
Операционная среда этого руководства: система Windows7, версия React18, компьютер Dell G3.
Что такое реагировать?
React — это библиотека JavaScript, используемая для создания пользовательских интерфейсов. Она возникла из внутреннего проекта Facebook. Поскольку компанию не удовлетворяли все имеющиеся на рынке фреймворки JavaScript MVC, она решила написать собственную для создания веб-сайта Instagram. После его создания я обнаружил, что этот набор вещей очень полезен, поэтому в мае 2013 года его исходный код был открыт.
React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Используя React, вы можете объединять короткие независимые фрагменты кода в сложные интерфейсы пользовательского интерфейса. Эти фрагменты кода называются «компонентами».
Поскольку идея дизайна React чрезвычайно уникальна, это революционная инновация, обладающая выдающейся производительностью, а логика кода очень проста. Поэтому все больше и больше людей начинают обращать на него внимание и использовать его, думая, что в будущем он может стать основным инструментом веб-разработки.
React — это библиотека JavaScript с открытым исходным кодом, которая обеспечивает представление данных, преобразуемых в HTML. Представления React обычно визуализируются с использованием компонентов, которые содержат другие компоненты, указанные в пользовательской разметке HTML. React предоставляет программистам модель, в которой дочерние компоненты не могут напрямую влиять на внешние компоненты, эффективные обновления HTML-документов при изменении данных и четкое разделение между компонентами в современных одностраничных приложениях.
React упрощает создание интерактивного пользовательского интерфейса. Создавайте краткие представления для каждого состояния вашего приложения, чтобы 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. Он в основном используется для использования в промежуточных и серверных системах.
Официальный сайт: https://ant.design/index-cn
характеристика:
Интерактивный язык и визуальный стиль, извлеченные из продуктов среднего и внутреннего уровня корпоративного уровня.
Высококачественные компоненты React, готовые к использованию прямо из коробки.
Создан с использованием TypeScript и предоставляет полные файлы определений типов.
Полнофункциональная система инструментов разработки и проектирования.
Начать
Представляем Ant Desig
Ant Design — это система проектирования, которая обслуживает продукты корпоративного уровня. Библиотека компонентов представляет собой реализацию React. antd публикуется в виде пакета npm, который разработчики могут установить и использовать.
Вы можете использовать npm или Yarn для разработки. Вы можете не только легко выполнять отладку в среде разработки, но также безопасно упаковывать и развертывать его в производственной среде, пользуясь множеством преимуществ, предоставляемых всей экосистемой и цепочкой инструментов.
$ npm install antd --save$ Yarn добавить antdВ umi вы можете открыть плагин antd, настроив antd в наборе плагинов umi-plugin-react. Плагин antd поможет вам внедрить antd и реализовать компиляцию по требованию.
Настройте в файле config.js:
экспорт по умолчанию { плагины: [ ['umi-plugin-react', { dva: true, // Включить функцию dva antd: true // Включить функцию Ant Design}] ]};Проверьте свои навыки
Далее начинаем использовать компоненты antd, на примере компонента tabs, адрес: https://ant.design/comComponents/tabs-cn/ Эффект:
Обратитесь к официальному примеру, используйте его и создайте файл MyTabs.js:
import React из 'react'import {Tabs} из 'antd'const TabPane = Tabs.TabPane;const callback = (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.