React CRUD: как создать пример CRUD на React 16

React CRUD — важная операция для изучения React.js для начинающих. Мы узнаем, как создать небольшое веб-приложение, которое шаг за шагом с нуля создает, читает, обновляет и удаляет данные из базы данных MongoDB. Мы создадим веб-приложение MERN Stack.

Мы вызываем приложение React CRUD для приложения MERN Stack , потому что мы используем MongoDB , Express , React и Node.js стек технологий. Эта статья покажет вам, как создать приложение, в котором пользователь может создать новый бизнес, получить этот бизнес, изменить бизнес и удалить бизнес с помощью React.js.

Что такое React?

React.js — это библиотека пользовательского интерфейса, а не полная структура, такая как Angular . React — это библиотека JavaScript для создания пользовательских интерфейсов.

Он поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций. Вы можете найти его официальную документацию здесь.

React также чаще всего ассоциируется с JSX, хотя его можно использовать Реагируйте без JSX. JSX позволяет вам смешивать HTML с вашим JavaScript, а не использовать шаблоны для определения HTML и привязки этих значений к модели представления, и вы можете писать все на JavaScript.

Значения могут быть простыми объектами JavaScript, а не строками, которые необходимо оценить.

Вы также можете написать повторно используемые компоненты React, которые в конечном итоге будут выглядеть как любой другой HTML-элемент в вашем коде.

Зачем использовать React?

Сегодня существует много фреймворков JavaScript. Кажется, я слышу о новом каждый месяц или около того.

Все они имеют свои преимущества и обычно используются для решения некоторых проблем с существующей структурой.

Одна из лучших особенностей этого — количество компонентов и библиотек с открытым исходным кодом в экосистеме React, поэтому у вас есть из чего выбирать.

Это может быть сложно, если вы нерешительны, но если вам нравится свобода поступать по-своему, то React может быть лучшим вариантом для вас.

React.js позволяет нам выразить, как наше приложение должно выглядеть в любой момент времени. React будет автоматически управлять всеми обновлениями пользовательского интерфейса при изменении ваших базовых данных.

Когда данные изменяются, React концептуально нажимает кнопку «обновить» и знает только об обновлении измененных частей. Основная причина использования React для вашего следующего проекта заключается в следующем.

  1. Кривая быстрого обучения.
  2. Компоненты многократного использования.
  3. Быстрый рендеринг с помощью Virtual DOM.
  4. Чистая абстракция.
  5. Redux: библиотека управления состоянием для сложных пользовательских интерфейсов.
  6. Отлично Инструменты разработчика.
  7. React Native: вы можете создать кроссплатформенное собственное мобильное приложение для Android или iOS ..

Кто использует React?

Кроме Facebook и Instagram , многие известные компании используют для React, в том числе Dropbox , PayPal , Netflix , Airbnb, и многие другие.

Технические характеристики

Мы будем использовать следующие технологии с его версией.

  1. macOS ( Mojave )
  2. Node v10. 11.0
  3. NPM v6.4.1
  4. Версия оболочки MongoDB v3.6.3
  5. Версия MongoDB
  6. Версия React.js 16.6.1

Шаги по созданию примера React CRUD

Чтобы следовать этому руководству, вам потребуются базовые знания HTML, CSS и JavaScript/ES6. Вы также должны знать очень основы React.js.

Создайте новое приложение React, используя следующую команду.

Шаг 1. Установите приложение React.

 npx create-react-app reactcrudcd reactcrudnpm start 

Если вы столкнулись с какой-либо проблемой при компиляции, создайте файл .env в корне и добавьте следующую строку кода.

 SKIP_PREFLIGHT_CHECK = true 

Перейдите по этому URL-адресу:

Теперь установите Bootstrap 4 Framework с помощью следующей команды.

  yarn add bootstrap # ornpm install bootstrap --save 

Импортируйте Bootstrap CSS Framework внутри нашего проекта.

Измените код внутри файл src >> App.js .

//App.jsimport React, {Component} из 'react'; import 'bootstrap/dist/css/ bootstrap.min.css '; класс  s Приложение расширяет компонент {render () {return (

React CRUD Tutorial

); }} экспортировать приложение по умолчанию;

Сохраните файл и перейдите в браузер, и вы увидите, что мы успешно интегрировали bootstrap 4 в наше приложение для реагирования.

Шаг 2. Настройте маршрутизацию React

Введите следующую команду, чтобы установить react- модуль router-dom . Если вы хотите найти дополнительную информацию о модуле response-router-dom , вы можете следовать этой документации.

 yarn add response-router-dom # ornpm  install response-router-dom --save 

Перейдите в файл index.js и оберните объект BrowserRouter вокруг Компонент App.js .

//index.jsimport React из 'react'; импорт ReactDOM из 'react-dom'; импорт {BrowserRouter} из 'react  -router-dom '; импортировать приложение из'./App '; импортировать * как serviceWorker из' ./serviceWorker';ReactDOM.render (  , document.getElementById ('root')); serviceWorker.unregister (); 

Теперь создайте три компонента.

Внутри папки src создайте один каталог с именем components и внутри этой папки создайте три компонента.

  1. create.component.js
  2. edit.component.js
  3. index.component.js
//create.component.jsimport React, {Component} из 'react'; экспорт класса по умолчанию Create extends Component {render () {return (

Добро пожаловать в Create Component !!

)}}
//edit.component.jsimport React, {Component} из 'react'; экспорт класса по умолчанию  Edit extends Component {render () {return (

Добро пожаловать в Edit Component !!

)}}
//index.component.jsimport React  , {Component} из 'react'; экспортировать класс по умолчанию I  ndex extends Component {render () {return (

Добро пожаловать в компонент индекса !!

)}}

Теперь добавьте панель навигации в нашу Пример React CRUD . Напишите следующий код внутри файла App.js .

//App.jsimport React, {Component} из 'react'; import 'bootstrap/dist/ css/bootstrap.min.css '; импортировать {BrowserRouter as Router, Switch, Route, Link} из' response-router-dom '; импортировать Create из' ./components/create.component';import Edit from './components /edit.component '; импортировать индекс из' ./components/index. component '; класс App расширяет Component {render () {return ( 

Добро пожаловать в учебное пособие по React CRUD


Маршрутизатор>); }} экспортировать приложение по умолчанию;

Сохраните файл и перейдите в браузер.

Шаг 3. Создайте форму начальной загрузки

Напишите код для создания формы начальной загрузки внутри create.component.js .

//create.component.jsimport React, {Component} из 'react'; экспорт класса по умолчанию Create extends Component {render ()  {return (

Добавить новую компанию

)} }

Шаг 4. Отправьте Форма

Хорошо, теперь у нас есть три поля.

  1. имя человека
  2. название компании
  3. gst number

Итак, нам нужно создать четыре функции, которые могут отслеживать значения текстового поля и устанавливать это состояние в соответствии с ним. Кроме того, четвертая функция отправит запрос POST на экспресс-сервер узла..

Теперь, сначала мы определим конструктор и установим начальное состояние, а затем также свяжем его с различными событиями внутри конструктора.

Затем определим различные функции с каждым вводимым текстовым значением. Поэтому, когда пользователь вводит текст внутри текстового поля, мы устанавливаем состояние в соответствии с ним.

Итак, допустим, пользователь вводит имя человека внутри текстового поля; мы меняем государственное значение имени человека. Наконец, то же самое для всех входных данных, и когда мы отправляем форму, мы получаем значения из состояния и отправляем их в запрос POST.

//App.jsimport React, {Component  } из 'react'; экспорт класса по умолчанию Create extends Component {constructor (props) {super (props);  this.onChangePersonName = this.onChangePersonName.bind (это);  this.onChangeBusinessName = this.onChangeBusinessName.bind (это);  this.onChangeGstNumber = this.onChangeGstNumber.bind (это);  this.onSubmit = this.onSubmit.bind (это);  this.state = {person_name: '', business_name: '', business_gst_number: ''}} onChangePersonName (e) {this.setState ({person_name: e.target.value});  } onChangeBusinessName (e) {this.setState ({business_name: e.target.value})} onChangeGstNumber (e) {this.setState ({business_gst_number: e.target.value})} onSubmit (e) {e.preventDefault (  );  console.log (`Значения: $ {this.state.person_name}, $ {this.state.business_name} и $ {this.state.business_gst_number}`) this.setState ({person_name: '', business_name: '  ', business_gst_number:' '})} render () {return (

Добавить новый бизнес

)}}

Шаг 5. Создайте бэкэнд на Node.js

Теперь мы создадим серверный API в Node, Express и MongoDB.

В корне нашего проекта reactcrud создайте одну папку с именем api и войдите в нее папку и инициализируйте файл package.json .

 npm init -y 

Теперь установите следующие зависимости node.js .

  yarn add express body-parser cors mongoose # ornpm install express body-parser cors mongoose --save 

Также установите nodemon в качестве зависимости разработки. Так что нам не нужно перезапускать каждый раз, когда мы меняем код нашего сервера.

 npm install nodemon --save-dev 

Теперь внутри api , создайте один файл с именем server.js и добавьте в него следующий код.

//server.jsconst express = require  ('express'); const app = express (); const bodyParser = require ('body-parser'); const PORT = 4000; const cors = require ('cors'); app.use (cors ()); приложение  .use (bodyParser.urlencoded ({extended: true})); app.use (bodyParser.json ()); app.listen (ПОРТ, функция () {console.log ('Сервер работает на порту:', ПОРТ  );}); 

Сохраните файл и откройте терминал с новой вкладкой внутри папки api и нажмите следующую команду, чтобы запустить сервер node.js.

 nodemon server 

Внутри терминала вы можете видеть, что наш сервер node.js работает.

Шаг 6. Настройте базу данных MongoDB

Если вы новичок в базе данных MongoDB , ознакомьтесь с приведенным ниже руководством.

Связанное сообщение: NoSQL MongoDB Учебник

Я уже установил MongoDB на Mac. Итак, я запускаю сервер MongoDB с помощью следующей команды.

 mongod 

Внутри api , создайте один файл с именем DB.js и добавьте следующую строку кода.

//DB.jsmodule.exports =  {DB: 'mongodb://localhost: 27017/responsecrud'} 

В моей локальной базе данных MongoDB имя пользователя и пароль пустые, но в производственной , вам нужно создать одного администратора и назначить ему базу данных.

Теперь импортируйте этот файл DB.js на сервер .js файл.

//server.jsconst express = require ('express'); const app = express (); const bodyParser = require ('body-parser');  const PORT = 4000; const cors = require ('cors'); const mongoose = require ('mongoose'); const config = require ('./DB.js'); mongoose.Promise = global.Promise; mongoose.connect  (config.DB, {useNewUrlParser: true}). then (() => {console.log ('База данных подключена')}, err => {con  sole.log ('Не удается подключиться к базе данных' + err)}); app.use (cors ()); app.use (bodyParser.urlencoded ({extended: true})); app.use (bodyParser.json  ()); app.listen (PORT, function () {console.log ('Сервер работает на порту:', PORT);}); 

Сохраните файл, и вы увидите внутри терминала наш узел . js подключено к базе данных MongoDB .

Шаг 7. Создание схемы Mongoose

Следующим шагом является создание схемы для базы данных MongoDB. Для этого создайте файл в корне проекта api с именем business.model.js и добавьте следующий код.

//business.model.jsconst mongoose =  require ('mongoose'); const Schema = mongoose.Schema;//Определение коллекции и схемы для Businesslet Business = new Schema ({person_name: {type: String}, business_name: {type: String}, business_gst_number: {type: Number  }}, {collection: 'business'}); module.exports = mongoose.model ('Business', Business); 

Мы взяли три поля под названием person_name, business_name , и business_gst_number, с его типами данных.

Шаг 8. Определите маршрут для приложения Node.js Express

Напишите код CRUD в файле business.route.js .

//business.route.jsconst express =  require ('express'); const businessRoutes = express.Router ();//Требовать бизнес-модель в нашем модуле маршрутов let Business = require ('./business.mod  el ');//Определенный маршрут магазинаbusinessRoutes.route ('/add '). post (function (req, res) {let business = new Business (req.body);  business.save () .then (business => {res.status (200) .json ({'business': 'бизнес успешно добавлен'});}) .catch (err => {res.status (400)  .send ("невозможно сохранить в базу данных");});});//Определено получение данных (индекс или листинг) routebusinessRoutes.route ('/'). get (function (req, res) {Business.find (  function (err, Business) {if (err) {console.log (err);} else {res.json (Business);}});});//Определено редактировать routebusinessRoutes.route ('/edit/: id  ') .get (function (req, res) {let id = req.params.id; Business.findById (id, function (err, business) {res.json (business);});});//Определено  обновить routebusinessRoutes.route ('/update/: id'). post (function (req, res) {Business.findById (req.params.id, function (err, business) {if (! business) res.status (404  ) .send ("данные не найдены"); else {business.person_name = req.body.person_name; business.business_name = req.body.business_name; business.business_gst_number = req.body.business_gst_number; business.save ().  then (business => {  res.json ('Обновление завершено');  }) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");});  }});});//Определенное удаление |  удалить |  уничтожить routebusinessRoutes.route ('/delete/: id'). get (function (req, res) {Business.findByIdAndRemove ({_ id: req.params.id}, function (err, business) {if (err) res.  json (err); else res.json ('Успешно удалено');});}); модуль. Export = businessRoutes; 

Здесь мы определили операции CRUD для MongoDB . Поэтому, когда запрос попадает на сервер, он сопоставляет URI, и в соответствии с URI будет выполнена указанная выше функция, и операция с базой данных будет выполнена и отправит ответ клиенту.

Здесь мы использовали Mongoose ORM для сохранения, обновления и удаления данных из базы данных. Mongoose — это ORM , используемый в базе данных MongoDB . Теперь у нас есть все операции CRUD, настроенные для файла маршрута; нам нужно импортировать внутри файла server.js .

Итак, наш последний файл server.js выглядит так.

//server.jsconst express = require ('express'); const app = express (); const bodyParser = require ('body-parser'); const PORT = 4000; const cors =  require ('cors'); const mongoose = require ('mongoose'); const config = require ('./DB.js'); const businessRoute = require ('./business.route'); mongoose.Promise = global  .Promise; mongoose.connect (config.DB, {useNewUrlParser: true}). Then (() => {console.log ('База данных подключена')}, err => {console.log ('Не удается подключиться к  база данных '+ err)}); app.use (cors ()); app.use (bodyParser.urlencoded ({extended: true})); app.use (bodyParser.json ()); app.use (' /business ', businessRoute); app.listen (PORT, function () {console.log (' Сервер работает на порту: ', PORT);}); 

Сохраните файл и посмотрите терминал и проверьте, есть ли ошибки.

Шаг 9: Установите библиотеку Axios и отправьте запрос POST. g>

Установите библиотеку Axios и отправьте запрос POST . Если вы хотите узнать о библиотеке Axios , ознакомьтесь с моей статьей Приступая к работе с примером HTTP-клиента на основе Axios Promise .

 yarn add axios # ornpm install axios --save 

Теперь отправьте HTTP-запрос POST вместе с данными формы на js-сервер node . Мы отправим данные как объект, потому что мы использовали синтаксический анализатор тела на бэкэнде, чтобы извлечь данные из запроса и сохранить их в базе данных.

Напишите следующий код внутри create.component.js файл.

//create.component.jsimport React, {Component} из 'react'; импортировать аксиомы из 'axios'; экспортировать класс по умолчанию  Создать расширяет компонент {конструктор (реквизиты) {супер (реквизиты);  this.onChangePersonName = this.onChangePersonName.bind (это);  this.onChangeBusinessName = this.onChangeBusinessName.bind (это);  this.onChangeGstNumber = this.onChangeGstNumber.bind (это);  this.onSubmit = this.onSubmit.bind (это);  this.state = {person_name: '', business_name: '', business_gst_number: ''}} onChangePersonName (e) {this.setState ({person_name: e.target. значение });  } onChangeBusinessName (e) {this.setState ({business_name: e.target.value})} onChangeGstNumber (e) {this.setState ({business_gst_number: e.target.value})} onSubmit (e) {e.preventDefault (  );  const obj = {person_name: this.state.person_name, business_name: this.state.business_name, business_gst_number: this.state.business_gst_number};  axios.post ('http://localhost: 4000/business/add', obj) .then (res => console.log (res.data));  this.setState ({person_name: '', business_name: '', business_gst_number: ''})} render () {return (

Добавить новый бизнес

)}}

Теперь отправьте форму с правильными значениями, откройте панель консоли браузера и см. ответ.

Кроме того, теперь проверьте базу данных MongoDB и посмотрите значения.

Чтобы увидеть значения в базе данных, мы можем запустить оболочку mongo и посмотреть значения в базе данных.

Итак, мы видим, что наши данные успешно добавлены.

Шаг 10: Как отображать данные в React js

Напишите следующий код внутри файла index.component.js .

//index.component.jsimport React, {Component} из 'react'; импорт axios из 'axios'; импорт TableRow из './TableRow'; экспорт класса по умолчанию Index extends Component {constructor (props) {super (props  );  this.state = {бизнес: []};  } componentDidMount () {axios.get ('http://localhost: 4000/business') .then (response => {this.setState ({business: response.data});}) .catch (function (error)  {console.log (error);})} tabRow () {вернуть this.state.business. map (функция (объект, я) {return ;});  } render () {return (

Бизнес-список

{ this.tabRow ()}
Человек Бизнес Номер GST Действие
); }}

Итак, мы отправили запрос GET на сервер node.js и получили эти данные с API.

Мы импортировали компонент TableRow.js . Итак, давайте создадим этот компонент. Внутри папки components создайте еще один компонент с именем TableRow.js и добавьте в него следующий код.

// TableRow.jsimport React, {Component} от 'react'; класс TableRow расширяет Component {render () {return (  {this.props.obj.person_name}   {this.props  .obj.business_name}   {this.props.obj.business_gst_number}        );  }} экспортировать TableRow по умолчанию; 

Этот компонент отвечает за отображение данных строки, полученных из бэкэнда.

Сохраните файл, перейдите в браузер и посмотрите этот URL :

Шаг 11: отредактируйте и обновите функциональность в React js

Сначала добавьте ссылку в TableRow .js .

//TableRow.jsimport {Link} из 'response-router-dom';  Изменить  

Добавьте следующий код в файл edit.component.js .

//edit.component.jsimport React, {Component} из 'react'; импорт axios из 'axios'; экспорт класса по умолчанию Edit extends Component {constructor (props) {super (props);  this.onChangePersonName = this.onChangePersonName.bind (это);  this.onChangeBusinessName = this.onChangeBusinessName.bind (это);  this.onChangeGstNumber = this.onChangeGstNumber.bind (это);  this.onSubmit = this.onSubmit.bind (это);  this.state = {person_name: '', business_name: '', business_gst_number: ''}} componentDidMount () {axios.get ('http://localhost: 4000/business/edit/' + this.props.match.  params.id) .then (response => {this.setState ({person_name: response.data.person_name, business_name: response.data.business_name, business_gst_number: response.data. business_gst_number});  }) .catch (функция (ошибка) {console.log (ошибка);})} onChangePersonName (e) {this.setState ({person_name: e.target.value});  } onChangeBusinessName (e) {this.setState ({business_name: e.target.value})} onChangeGstNumber (e) {this.setState ({business_gst_number: e.target.value})} onSubmit (e) {e.preventDefault (  );  const obj = {person_name: this.state.person_name, business_name: this.state.business_name, business_gst_number: this.state.business_gst_number};  axios.post ('http://localhost: 4000/business/update/' + this.props.match.params.id, obj) .then (res => console.log (res.data));  this.props.history.push ('/index');  } render () {return (

Обновить бизнес

)}}

Итак, что мы сделали, мы использовали метод жизненного цикла компонента для извлечения данных из API .

Эти данные необходимо отправить находится внутри текстового поля, потому что это форма редактирования. Затем это то же самое, что мы написали код в файле create.component.js .

Сохраните файл и перейдите на страницу редактирования из индекс или страницу со списком. Если данные не отображаются, сначала убедитесь, что у вас есть работающий сервер node.js на бэкэнде.

Мы также написали код, который обновит данные, потому что мы написали функцию, которая будет отправлять запрос на сервер node.js и обновите данные на основе идентификатора.

Шаг 12: удаление операции в React

Теперь осталось только удалить данные. Чтобы определить функцию удаления внутри файла TableRow.js .

//TableRow. jsimport React, {Component} из 'react'; импорт {Link} из 'react-router-dom'; импорт axios из 'axios'; класс TableRow расширяет Component {constructor (props) {super (props);  this.delete = this.delete.bind (это);  } delete () {axios.get ('http://localhost: 4000/business/delete/' + this.props.obj._id) .then (console.log ('Deleted')) .catch (err =>  console.log (err))} render () {return (  {this.props.obj.person_name}   {this.props.obj.business_name}   {this.props.obj.business_gst_number}    Изменить      );  }} экспортировать TableRow по умолчанию; 

Итак, мы завершили Пример React CRUD или MERN Stack Tutorial с нуля.

Я разместил этот код на Github . Так что вы также можете проверить этот код.

Наконец, React CRUD Example Tutorial закончен. Спасибо, что приняли это.

Код Github

Рекомендуемые сообщения

React Material UI

React Context API

Учебное пособие по React Datepicker

Оцените статью
nanomode.ru
Добавить комментарий