Прошло некоторое время, я думал об изучении React, и самый простой способ выучить новый язык — написать приложение Hello World. После написания моего первого приложения Hello world я подумал о том, чтобы попробовать свой ограниченный IQ (интеллектуальный коэффициент). Помимо шуток, я хотел написать простое веб-приложение, которое отображает таблицу, в которой можно редактировать и проверять различные ячейки. Говоря об адаптивной HTML-таблице, мой первый выбор был Bootsrap, но я не был уверен, что Bootstrap ослабит преимущество функции V-Dom, предоставляемой React. Проведя небольшое исследование, я выбрал React-Bootsrap-table (версия 2) из-за следующих преимуществ:
- Bootstrap использует Jquery для компонентов JS, которые используют прямую манипуляцию DOM вместо манипуляции V-Dom, предоставляемой React, поэтому очевидное влияние на производительность.
- React-Bootstrap экономит ввод текста, инкапсулируя функции Bootstrap в компоненты React. Bootstrap против React-Bootstrap.
Этих двух причин было достаточно, чтобы я использовал React-Bootstrap вместо Bootstrap, но прежде чем я углублюсь в технические аспекты кода, я предполагаю, что на машине разработки установлены nodeJs и NPM.
Шаг 1. Установите React Cli
npm install -g react-cli react
Шаг 2. Создайте новый проект React
npx create-react-app react-bootstrap-table-next-demo
Шаг 3. Создайте файл Package.json
Команда инициализации NPM используется для создания файла package.json. Package.json хранит версии и имена всех библиотек, используемых в приложении. Используемая команда
инициализация нпм
Команда запросит некоторые основные детали, и я использовал следующие
- имя пакета: реакция-бутстрап-таблица-следующий
- версия: Значение по умолчанию (1.0.0)
- описание: POC для bootstrap-react-next
- точка входа: значение по умолчанию (index.js)
- git-репозиторий: https://github.com/tarunbhatt9784/react-bootstrap-table-next.git
- автор: Тарун Бхатт
- лицензия: значение по умолчанию (ISC)
Шаг 4. Загрузите библиотеки
Приведенная ниже команда устанавливает необходимые библиотеки и сохраняет записи в файле package.json.
npm install —-save react-bootstrap-table-next react-bootstrap-table2-editor bootstrap
После завершения выполнения команды npm package.json будет выглядеть так:
{ “name”: “react-bootstrap-table-next-demo”, “version”: “0.1.0”, “private”: true, “dependencies”: { “bootstrap”: “⁴.3.1”, “react”: “¹⁶.9.0”, “react-bootstrap-table-next”: “³.2.0”, “react-bootstrap-table2-editor”: “¹.4.0”, “react-dom”: “¹⁶.9.0”, “react-scripts”: “3.1.1” }, “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject” }, “eslintConfig”: { “extends”: “react-app” }, “browserslist”: { “production”: [ “>0.2%”, “not dead”, “not op_mini all” ], “development”: [ “last 1 chrome version”, “last 1 firefox version”, “last 1 safari version” ] } }
- react-bootstrap-table-next : Следующее поколение react-bootsrap-table
- react-bootstrap-table2-editor : отделить кодовую базу редактирования ячейки от react-bootstrap-table2-editor
- bootstrap: библиотека Bootsrap установлена для использования стилей CSS. Это используется библиотеками react-bootstrap. Важно отметить, что стили Bootstrap CSS не уменьшат преимуществ, предоставляемых React, согласно моему предыдущему объяснению.
Шаг 5. Отредактируйте App.js
Для этого демонстрационного приложения я буду отображать список пользователей в таблице. Ячейки в таблице можно редактировать и проверять. Конечный продукт будет выглядеть примерно так:
App.js будет выглядеть примерно так:
import React, {Component} from ‘react’; import ‘react-bootstrap-table-next/dist/react-bootstrap-table2.min.css’; import BootstrapTable from ‘react-bootstrap-table-next’; import ‘bootstrap/dist/css/bootstrap.css’; import cellEditFactory from ‘react-bootstrap-table2-editor’; const columns = [{ dataField: ‘id’, text: ‘Id’ }, { dataField: ‘name’, text: ‘Name’ }, { dataField: ‘username’, text: ‘User Name’ }, { dataField: ‘email’, text: ‘Email’ }]; export default class App extends Component{ render() { return ( <div> <BootstrapTable keyField=”id” data={ this.state.contacts } columns={ columns } cellEdit={ cellEditFactory({ mode: ‘click’, blurToSave: true }) } /> </div>) } state = { contacts: [] }; componentDidMount() { fetch(‘http://jsonplaceholder.typicode.com/users') .then(res => res.json()) .then((data) => { this.setState({ contacts: data }) }) .catch(console.log) } }
Давайте прервем изменения, чтобы понять это лучше
Шаг 5.1. Импорт операторов
import React, {Component} from ‘react’; import ‘react-bootstrap-table-next/dist/react-bootstrap-table2.min.css’; import BootstrapTable from ‘react-bootstrap-table-next’; import ‘bootstrap/dist/css/bootstrap.css’; import cellEditFactory from ‘react-bootstrap-table2-editor’;
- импортировать React, {Component} из «React»; : импортировать React и компонент
- импорт ‘react-bootstrap-table-next/dist/react-bootstrap-table2.min.css’; : Импорт CSS из библиотеки react-bootstrap-table-next.
- импортировать BootstrapTable из «react-bootstrap-table-next»; : Импорт компонента BootastrapTable из библиотеки react-bootstrap-table-next.
- import ‘bootstrap/dist/css/bootstrap.css’;: Импорт CSS-кода начальной загрузки
- импортировать cellEditFactory из редактора «реакция-бутстрап-таблица2»; Импортируйте класс cellEditFactory из react-bootstrap-table2-editor для возможности редактирования
Шаг 5.2. Добавьте имена столбцов с проверкой
const columns = [{ dataField: ‘id’, text: ‘Id’ }, { dataField: ‘name’, text: ‘Name’ }, { dataField: ‘username’, text: ‘User Name’ }, { dataField: ‘email’, text: ‘Email’, validator: (newValue, row, column) => { if (!newValue) { return { valid: false, message: ‘Email cannot be null’ }; } if (!newValue.includes(“@”)) { return { valid: false, message: ‘Email Should have @ sign’ }; } return true; } }];
- Id: уникальный идентификатор для каждого пользователя.
- Имя:имя пользователя.
- UserName:имя пользователя.
- Электронная почта:идентификатор электронной почты пользователя. Этот столбец имеет некоторые проверки. Электронная почта не должна быть нулевой и должна иметь «@». Смотрите изображения ниже:
Шаг 5.3. Метод componentDidMount
componentDidMount() { fetch(‘http://jsonplaceholder.typicode.com/users') .then(res => res.json()) .then((data) => { this.setState({ users: data }) }) .catch(console.log) }
Метод будет отвечать за получение пользователей из вызова API. Важные особенности этого метода:
- componentDidMount: как следует из названия, после правильного отображения всех элементов страницы вызывается этот метод. После того, как разметка установлена на странице, этот метод вызывается самим React либо для получения данных из внешнего API, либо для выполнения некоторых уникальных операций, для которых требуются элементы JSX.
- Выбор пользователей:используется заполнитель JSON для подделки Rest API для тестирования и прототипирования. Узнать больше". Как только пользователи получены, состояние обновляется. Объект состояния — это место, где вы храните значения свойств, принадлежащих компоненту. Когда объект состояния изменяется, компонент перерисовывается.
Шаг 5.3. Экспорт класса и визуализация
export default class App extends Component{ render() { return ( <div> <BootstrapTable keyField=”id” data={ this.state.users } columns={ columns } cellEdit={ cellEditFactory({ mode: ‘click’, blurToSave: true }) } /> </div>) }
Важные моменты:
- Render:React Propsr относится к методу совместного использования кода между реагирующими компонентами с использованием свойства, значением которого является функция. В этом фрагменте кода BootstrapTable — это компонент, совместно используемый библиотекой react-bootstrap-table-next.
Шаг 6. Запуск NPM
- Откройте командную строку и перейдите к месту, где проект сохранен на компьютере для разработки.
- Запустить НПМ Старт
Получите доступ к приложению на http://localhost:3000/. Обратите внимание, что это приложение не совместимо с IE и было протестировано только в Chrome.