Прошло некоторое время, я думал об изучении React, и самый простой способ выучить новый язык — написать приложение Hello World. После написания моего первого приложения Hello world я подумал о том, чтобы попробовать свой ограниченный IQ (интеллектуальный коэффициент). Помимо шуток, я хотел написать простое веб-приложение, которое отображает таблицу, в которой можно редактировать и проверять различные ячейки. Говоря об адаптивной HTML-таблице, мой первый выбор был Bootsrap, но я не был уверен, что Bootstrap ослабит преимущество функции V-Dom, предоставляемой React. Проведя небольшое исследование, я выбрал React-Bootsrap-table (версия 2) из-за следующих преимуществ:

  1. Bootstrap использует Jquery для компонентов JS, которые используют прямую манипуляцию DOM вместо манипуляции V-Dom, предоставляемой React, поэтому очевидное влияние на производительность.
  2. 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”
 ]
 }
}
  1. react-bootstrap-table-next : Следующее поколение react-bootsrap-table
  2. react-bootstrap-table2-editor : отделить кодовую базу редактирования ячейки от react-bootstrap-table2-editor
  3. 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.