Если вы используете React.js или React Native для создания пользовательских интерфейсов, попробуйте эти платформы.
React.js и React Native — популярные платформы с открытым исходным кодом для разработки пользовательских интерфейсов (UI); оба оцениваются как желательные и используемые в опросе разработчиков StackOverflow в 2019 году. React.js был разработан Facebook в 2011 году как библиотека JavaScript для удовлетворения потребностей в кроссплатформенных, динамических и высокопроизводительных пользовательских интерфейсах, а React Native, выпущенный Facebook в 2015 году, используется для создания собственных приложений с использованием JavaScript.
Вам также может понравиться: Все реагирует: учебники для начинающих и экспертов, как
Ниже приведены 13 лучших фреймворков React JavaScript ; все они с открытым исходным кодом — первые 11 (например, React) лицензируются под лицензией MIT, а последние два — под Apache 2.0.
1. Создать приложение React
Этот интерфейс командной строки от разработчиков Facebook является обязательным для каждого проекта React Native. Причина в том, что приложение Create React простое в использовании и избавляет вас от необходимости вручную устанавливать и настраивать ваше приложение, тем самым экономя вам много времени и усилий.
С помощью простой команды все будет готово для простого создания собственного проекта React. Вы можете использовать его для создания каталога и файлов, а фреймворк также включает в себя инструменты для создания, тестирования и запуска вашего приложения.
JavaScript
1
# Install package $ npm install -g create-react-native-web-app # Run create-react-native-web-app <project-directory> $ create-react-native-web-app myApp # cd into your <project-directory> $ cd myApp # Run Web/Ios/Android development # Web $ npm run web # IOS (simulator) $ npm run ios # Android (connected device) $ npm run android
Почему стоит выбрать приложение для создания React?
- Первоклассный инструмент, разработанный с помощью комплекта конфигурации, транспилера и тестового прогона.
- Нет конфигурации и никаких дополнительных файлов в структуре приложения.
- Исправлен стек разработки .
- Эффективный инструмент быстрого развития.
2. Реакция материалов
Вдохновленный системой Google Material Design, Material Kit React может стать отличным выбором для создания компонентов пользовательского интерфейса React. Самое лучшее в этой библиотеке — это то, что она предлагает множество компонентов, которые собраны вместе и выглядят невероятно. Существует более 1000 полностью закодированных компонентов, каждый из которых имеет отдельные слои, организованные в папки. Это означает, что у вас есть тысячи вариантов на выбор. Также есть несколько примеров страниц на случай, если вы хотите получить вдохновение или поделиться идеей или концепцией с кем-то.
Установка комплекта материалов
$ npm install @material-ui/core
Реализация
JavaScript
xxxxxxxxxx
1
import React from 'react'; import Button from '@material-ui/core/Button'; const App = () => ( <Button variant="contained" color="primary"> Hello World </Button> );
2
Компонент Material-UI работает без какой-либо дополнительной настройки и не загрязняет глобальную область.
преимущество
Компонент React поддерживает более простую и быструю веб-разработку. С его помощью вы можете создать свою собственную систему проектирования или начать с Material Design.
3. Реакция осколков
Этот современный набор React UI был создан с нуля для достижения высокой производительности. Он имеет современную систему дизайна, которая позволяет вам настроить вещи так, как вы хотите. Вы даже можете скачать исходные файлы, чтобы настроить вещи на уровне кода. Кроме того, синтаксис SCSS, используемый для стилизации, расширяет возможности разработки.
Shards React основан на Shards и использует React Datepicker, React Popper (механизм позиционирования) и noUISlider. Он также поддерживает невероятные иконки Material Design. Есть несколько готовых версий, которые помогут вам получить вдохновение и начать работу.
Установка осколков с помощью пряжи или NPM
# Yarn yarn add shards-react # NPM npm i shards-react
преимущества
- Осколки легкие, имеют небольшую площадь и весят ~ 13 КБ, минимизированы и сжаты
- По умолчанию Shards реагирует и может адаптировать свой макет к любому размеру экрана.
- Осколки хорошо документированы, поэтому вы можете начать создавать красивые интерфейсы как можно скорее.
4. Стилизованные компоненты
Этот эффективный инструмент CSS помогает создавать небольшие, повторно используемые компоненты, которые отвечают за визуальный интерфейс приложения. С традиционным CSS вы можете случайно перезаписать селекторы, используемые в других местах на сайте, но стилизованные компоненты могут помочь вам полностью избежать этой проблемы, используя синтаксис CSS непосредственно внутри ваших компонентов.
Монтаж
npm install --save styled-components
Реализация
xxxxxxxxxx
1
const Button = styled.button` background: background_type; border-radius: radius_value; border: abc; color: name_of_color; Margin: margin_value; padding: value;
преимущество
- Сделайте компоненты более читабельными.
- Компоненты полагаются на JavaScript в своем стиле.
- Создание пользовательских компонентов с помощью CSS.
- Встроенный стиль.
- Преобразуйте компонент, даже пользовательский компонент, в стилизованный компонент, просто вызвав styled ().
5. Redux
Redux - это решение для управления состоянием приложений JavaScript. Хотя он в основном используется для React.js, вы также можете использовать его для других инфраструктур, подобных React.
Монтаж
sudo npm install redux sudo npm install react-redux
Реализация
JavaScript
xxxxxxxxxx
1
import { createStore } from "redux"; import rotateReducer from "reducers/rotateReducer"; function configureStore(state = { rotating: value}) { return createStore(rotateReducer,state); } export default configureStore;
преимущество
- Предсказуемое обновление состояния помогает определить поток данных приложения.
- Логика проще для тестирования и отладки во времени с помощью функций редуктора.
- Централизация государства.
6. Реагируйте Виртуализированный
Эта платформа React Native JavaScript помогает в рендеринге больших списков и табличных данных. Используя React Virtualized , вы можете ограничить количество запросов и элементов Document Object Model (DOM), тем самым повышая производительность приложений React .
Монтаж
npm install react-virtualized
Реализация
JavaScript
xxxxxxxxxx
1
import 'react-virtualized/styles.css' import { Column, Table } from 'react-virtualized' import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' import List from 'react-virtualized/dist/commonjs/List' { alias: { 'react-virtualized/List': 'react-virtualized/dist/es/List', }, rest }
преимущества
- Эффективно отображать большое количество данных.
- Рендеринг огромного набора данных.
- Реализует виртуальный рендеринг с набором компонентов.
7. Реагировать на ДНР
ReactDnD отвечает за создание сложных интерфейсов перетаскивания. Существуют десятки библиотек перетаскивания, но React DnD выделяется тем, что он построен на основе современного HTML5 API перетаскивания, что упрощает процесс создания интерфейсов.
Монтаж
npm install react-dnd-preview
Реализация
JavaScript
xxxxxxxxxx
1
import Preview from 'react-dnd-preview'; const generatePreview = ({itemType, item, style}) => { return <div class="item-list" style={style}>{itemType}</div>; }; class App extends React.Component { ... render() { return ( <DndProvider backend={MyBackend}> <ItemList /> <Preview generator={generatePreview} /> // or <Preview>{generatePreview}</Preview> </DndProvider> ); } }
преимущества
- Красивое и естественное движение предметов букета.
- Мощная клавиатура и программа чтения с экрана поддерживают кресло-коляску.
- Чрезвычайно производительный.
- Чистый и мощный API.
- Играет очень хорошо со стандартными взаимодействиями браузера.
- Необработанный стиль.
- Нет создания дополнительных оберточных доменных узлов.
8. Реагируйте на Bootstrap
Эта библиотека UI Kit заменяет JavaScript Bootstrap на React, предоставляя вам больший контроль над функциями каждого компонента. Поскольку каждый компонент создается так, чтобы он был легко доступен, React Bootstrap может быть полезен для построения инфраструктуры внешнего интерфейса. Есть тысячи тем для начальной загрузки на выбор.
Монтаж
npm install react-bootstrap bootstrap
Реализация
JavaScript
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css'; import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();
преимущества
- Может легко импортировать необходимый код / компонент.
- Сохраняет печать и ошибки, сжимая Bootstrap.
- Уменьшает усилия печати и конфликты за счет сжатия Bootstrap.
- Это простой в использовании.
- Это заключает в капсулу в элементах.
9. React Suite
React Suite - это еще одна эффективная среда React.js, которая содержит широкий спектр библиотек компонентов для продуктов корпоративных систем. Он поддерживает все основные браузеры и платформы, что делает его пригодным практически для любой системы. Он также поддерживает рендеринг на стороне сервера.
Монтаж
npm i rsuite --save
Реализация
JavaScript
xxxxxxxxxx
1
import { Button } from 'rsuite'; import 'rsuite/styles/less/index.less'; ReactDOM.render(<Button>Button</Button>, mountNode);
преимущества
- Простое управление приложением с помощью глобальных функций доступа.
- Библиотека Redux централизует управление состоянием.
- Redux гибок со всеми уровнями пользовательского интерфейса и имеет большую экосистему.
- Redux уменьшает эту сложность и обеспечивает глобальный доступ.
10. PrimeReact
Преимущество PrimeReact состоит в том, что он предоставляет компоненты, которые покрывают почти все основные требования пользовательского интерфейса, такие как параметры ввода, меню, представления данных, сообщения и т. Д. В структуре также уделяется пристальное внимание мобильному интерфейсу, что помогает вам разрабатывать сенсорный интерфейс. оптимизированные элементы.
Монтаж
npm install primereact --save npm install primeicons --save
Реализация
JavaScript
xxxxxxxxxx
1
import {Dialog} from 'primereact/dialog'; import {Accordion,AccordionTab} from 'primereact/accordion'; dependencies: { "react": "^16.0.0", "react-dom": "^16.0.0", "react-transition-group": "^2.2.1", "classnames": "^2.2.5", "primeicons": "^2.0.0" }
преимущества
- Простота и производительность.
- Простота использования.
- Весенние Приложения.
- Создавайте богатые пользовательские интерфейсы.
- Простота использования и простота.
11. Реактивный маршрутизатор
React Router довольно популярен в сообществе разработчиков React Native, потому что с ним очень легко начать работать. Все, что вам нужно, это Git и менеджер пакетов npm, установленные на вашем ПК, базовые знания React и желание учиться. Там нет ничего слишком сложного.
Монтаж
$ npm install --save react-router
Реализация
JavaScript
xxxxxxxxxx
1
import { Router, Route, Switch } from "react-router"; // using CommonJS modules var Router = require("react-router").Router; var Route = require("react-router").Route; var Switch = require("react-router").Switch;
преимущества
- Динамическое соответствие маршрута
- CSS переходы на представлениях при навигации
- Стандартизированная структура и поведение приложения
12. Втулка
Grommet используется для создания отзывчивых и доступных мобильных веб-приложений. Лучшее в этой лицензированной среде Apache 2.0 состоит в том, что она обеспечивает доступность, модульность, отзывчивость и тематизацию в одном небольшом пакете. Возможно, это одна из основных причин, по которой он широко используется такими компаниями, как Netflix, GE, Uber и Boeing.
Установка для пряжи и нпм
$ npm install grommet styled-components --save
Реализация
JavaScript
xxxxxxxxxx
1
"grommet-controls/chartjs": { "transform": "grommet-controls/es6/chartjs/${member}", "preventFullImport": true, "skipDefaultConversion": true
преимущества
- Создайте один инструментарий как пакетную сделку
- Принять политику открытых дверей до крайности
- Реструктуризация может помочь влиять на установленную организацию
13. Onsen UI
Onsen UI - это еще одна среда разработки мобильных приложений, которая использует HTML5 и JavaScript и предлагает интеграцию с Angular, Vue и React. Он лицензируется под Apache 2.0.
Онсен предлагает вкладки, боковое меню, стек навигации и другие компоненты. Лучшее в фреймворке заключается в том, что все его компоненты поддерживают iOS и Android Material Design, а также автоматическое моделирование, которое меняет внешний вид приложения в зависимости от платформы.
Монтаж
npm install onsenui
Реализация
JavaScript
xxxxxxxxxx
1
(function() { 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope) { // more to come here }); })();
преимущества
- Пользовательский интерфейс Onsen построен на основе бесплатного и открытого исходного кода.
- Он не навязывает DRM-тип приложениям, разработанным с его помощью.
- Компилирует код JavaScript и HTML5.
- Предлагает конечным пользователям родной опыт.