Пример учебного пособия по React Express с нуля

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

Если вы хотите узнайте больше о Node.js, затем ознакомьтесь с этим курсом NodeJS — Полное руководство (включая MVC, REST API, GraphQL)

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

Мы начинаем наше руководство с установки React js на нашу машину.

Шаг 1. Установите React с помощью приложения create response.

Перейдите на диск вашего проекта и нажмите следующую команду.

 npx create-react-app response-express-tutorial 

Хорошо, после установки перейдите в этот каталог.

 cd response-express-tutorial 

Запустите сервер разработки.

 yarn start 

Шаг 2. Определите маршрутизацию компонентов.

Введите следующую команду в своем терминале, чтобы установить response — модуль router-dom .

 yarn add response-router-dom 

Он установит зависимость. Если вы получаете сообщение об ошибке, пожалуйста, установите Yarn, менеджер пакетов. Теперь откройте код в своем любимом редакторе. Я использую код Visual Studio.

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

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

Создайте три компонента.

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

1. CreateComponent.js
2. EditComponent.js
3. IndexComponent.js

// CreateComponent.jsimport React, {Component} из 'react'; экспортный класс по умолчанию CreateComponent расширяет Component {rend  er () {return (
 
 Добро пожаловать в Create Component !! 
 
)}} 

//EditComponent. jsimport React, {Component} из 'react'; класс экспорта по умолчанию EditComponent расширяет Component {render () {return (
 
 Добро пожаловать в Edit Component !! 
 
)}} 

//IndexComponent.jsimport React, {Component} из 'react'; экспорт класса по умолчанию IndexComponent расширяет Component {render () {return (
 
 Добро пожаловать в компонент индекса !! 
  
)}} 

Теперь определите маршруты для каждого компонента.

//App.jsimport React, {Component} из 'react'; импорт {BrowserRouter as Router, Switch, Route, Link} из 'response-router-dom'; импорт CreateComponent из './components/CreateComponent';import  EditComponent из './components/EditComponent';import IndexComponent из' ./components/IndexComponent';class App расширяет Component {render () {return ( 
 
 Добро пожаловать в React Express Tutorial 
  
 
  Главная  
 
  Создать  
 
  Список  
 
  Изменить Ссылка> 
 
 
      
 );  }} экспортировать приложение по умолчанию; 

Наконец, сохраните файл и перейдите по адресу http://localhost: 3000/

. Шаг 3: Включите Bootstrap 4 и создайте форму.

Установите Bootstrap 4, используя следующую команду.

 yarn add bootstrap@4.0.0 

После этого перейдите в файл index.js и импортируйте начальную загрузку как NPM-зависимость.

//index.jsimport React from 'react'; импортировать ReactDOM из 'response-dom'; импортировать приложение из './App';import {BrowserRouter} из' response-router-dom '; импортировать registerServiceWorker из' ./registerServiceWorker ';  import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; ReactDOM.render (  , document.getElementById ('root')); registerServiceWorker ();  

Теперь, если ваш сервер разработки запущен, вы можете увидеть стили начальной загрузки, примененные к приложению React Express. Придайте стиль навигации. Для этого наш код выглядит так, как показано ниже.

//App.jsimport React, {Component} из 'react'; import {BrowserRouter as Router, Switch, Route, Link} из 'response-router-  dom '; импортировать CreateComponent из' ./components/CreateComponent';import EditComponent из './components/EditComponent '; импортировать IndexComponent из' ./components/IndexComponent';class App расширяет компонент {render () {return ( 
       
 );  }} экспортировать приложение по умолчанию; 

Применить свойство marignTop: 50 ко всем трем компонентам.

//CreateComponent.jsimport React  , {Component} из 'react'; класс экспорта по умолчанию CreateComponent расширяет Component {render () {return (
 
 Добро пожаловать в Create Component !! 
 
)}} 

Хорошо, теперь вы видите, что наш дизайн полностью изменился.

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

//CreateComponent.jsimport React, {Component} из 'react'; класс экспорта по умолчанию CreateComponent расширяет Component {render  () {return (
 
 Добавить новый сервер 
  
  Добавить имя хоста:   
 
  Добавить порт сервера:   
 
  
  
)}} 

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

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

1. имя сервера
2. порт сервера

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

//CreateComponent.jsimport React, {Component} из 'react'; экспорт класса по умолчанию CreateComponent расширяет Component {constructor (props  ) {супер (реквизит);  this.onChangeHostName = this.onChangeHostName.bind (это);  this.onChangePort = this.onChangePort.bind (это);  this.onSubmit = this.onSubmit.bind (это);  this.state = {имя: '', порт: ''}} onChangeHostName (e) {this.setState ({имя: e.target.value});  } onChangePort (e) {this.setState ({порт: e.target.value});  } onSubmit (e) {e.preventDefault ();  console.log (`имя - $ {this.state.name}, а порт - $ {this.state.port}`);  this.setState ({name: '', port: ''})} render () {return (
 
 Добавить новый сервер 
  
  Добавить имя хоста:   
 
  Добавить порт сервера:   
 
  
  
)}} 

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

Шаг 5. Создайте сервер Node.js и установите Express Framework.

Хорошо, давайте сделаем перерыв в интерфейсной части и перейдем к внутренней части нашего приложения. В корне нашего проекта создайте одну папку с именем server. В папке server создайте один файл с именем server.js. Теперь установите экспресс, а также другие зависимости.

 yarn add express nodemon body-parser cors mongoose 

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

Я импортировал все необходимые пакеты в файл server.js .

Хорошо, теперь запустим узел. js, используя следующую команду.

 nodemon server/server 

Первый сервер — это имя папки, а второй сервер — файл server.js .

В терминале вы можете увидеть, что сервер Node js работает на PORT: 4200 .

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

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

Сообщение по теме: Руководство по NoSQL MongoDB

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

 mongod 

Кроме того, мне нужно запустить Mongo Shell для взаимодействия с базой данных. Итак, на другой вкладке терминала введите следующую команду open Mongo Shell.

 mongo 

Шаг 7. Подключите приложение Express к базе данных Mongo.

Внутри папки server создайте одну папку с именем database. Внутри папки database создайте один файл с именем DB.js .

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

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

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

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

S Откройте файл и посмотрите терминал, вы видите, что наша база данных связана с нашим приложением Express.

Шаг 8: Создайте схему Mongoose.

Создайте одну папку внутри папки server с именем models. В папке models создайте один файл с именем

//ServerPort.jsvar mongoose = require ('mongoose'); var Schema = mongoose.Schema;//Определение коллекции и схемы для Itemsvar ServerPort = new Schema ({name: {type: String}, port: {type  : Number}}, {collection: 'servers'}); module.exports = mongoose.model ('ServerPort', ServerPort); 

Шаг 9. Создайте экспресс-маршруты для приложение.

Внутри папки server создайте одну папку с именем routes. Внутри этой папки маршрутов создайте один файл с именем

//ServerPortRouter.jsconst express = require ('express'); const app  = express (); const ServerPortRouter = express.Router (); const ServerPort = require ('../models/ServerPort'); ServerPortRouter.route ('/add'). post (function (req, res) {const serverport  = новый ServerPort (req.body); serverport.save () .then (serverport => {res.json ('Сервер успешно добавлен');}) .catch (err => {res.status (400) .send (  "невозможно сохранить в базе данных");});}); ServerPortRouter.route ('/'). get (function (req, res) {ServerPort.find (function (err, serverports) {if (err) {console  .log (err);} else {res.json (serverports);}});}); ServerPortRouter.route ('/edit/: id'). get (function (req, res) {const id = req.  params.id; ServerPort.findById (id, function (err, serverport) {res.json (serverport);});}); ServerPortRouter.route ('/update/: id'). post (function (req, res  ) {ServerPort.findById (req.params.id,  function (err, serverport) {if (! serverport) return next (новая ошибка ('Не удалось загрузить документ'));  else {//сделайте свои обновления здесь serverport.name = req.body.name;  serverport.port = req.body.port;  serverport.save (). then (serverport => {res.json ('Обновление завершено');}) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");}  );  }});}); ServerPortRouter.route ('/delete/: id'). Get (function (req, res) {ServerPort.findByIdAndRemove ({_ id: req.params.id}, function (err, serverport) {  if (err) res.json (err); else res.json ('Успешно удалено');});}); module.exports = ServerPortRouter; 

Последним шагом является импорт этого Файл ServerPortRouter.js в файл server.js. Итак, последний файл server.js выглядит так, как показано ниже.

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

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

Мы используем Axios библиотека для сетевого запроса к серверу Node.js. Итак, давайте сначала установим его.

 yarn add axios 

Теперь отправьте почтовый запрос вместе с данными формы на js-сервер node .

//CreateComponent.jsonSubmit (e) {e.preventDefault ();  const serverport = {имя: this.state.name, порт: this.state.port} axios.post ('http://localhost: 4200/serverport/add', serverport) .then (res => console.log (  res.data));  this.setState ({name: '', port: ''})} 

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

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

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

Шаг 11: Отображение данных сервера.

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

//IndexComponent.jsimport React, {Component} from 'response  '; импортировать axios из' axios '; импортировать TableRow из' ./TableRow '; экспортировать класс по умолчанию IndexComponent extends Component {constructor (props) {super (props);  this.state = {serverports: []};  } componentDidMount () {axios.get ('http://localhost: 4200/serverport') .then (response => {this.setState ({serverports: response.data});}) .catch (function (error)  {console.log (error);})} tabRow () {вернуть this.state.serverports.map (function (object, i) {return ;});  } render () {return (
  {this.tabRow ()} 
 
 
 
 ID 
 
 Name 
 
 Порт 
 
 
 
 
 
);  }} 

Хорошо, теперь напишите компонент без сохранения состояния, и это компонент TableRow.js , который нам нужно создать внутри компонентов папка.

//TableRow.jsimport React, {Component} из 'react'; класс TableRow расширяет Component {render () {return (  {this.props.  obj._id}   {this.props.obj.name}   {this.props.obj.port}    Изменить     Удалить   );  }} экспорт TableRow по умолчанию; 

Шаг 12: Отредактируйте и обновите данные.

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

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

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

//EditComponent.jsimport React, {Component} из 'react'; импорт axios из 'axios'; экспорт класса по умолчанию EditComponent расширяет Component {constructor (props) {  супер (реквизит);  this.onChangeHostName = this.onChangeHostName.bind (это);  this.onChangePort = this.onChangePort.bind (это);  this.onSubmit = this.onSubmit.bind (это);  this.state = {имя: '', порт: ''};  } componentDidMount () {axios.get ('http://localhost: 4200/serverport/edit/' + this.props.match.params.id) .then (response => {this.setState ({name: response.  data.name, port: response.data.port});}) .catch (function (error) {console.log (error);})} onChangeHostName (e) {this.setState ({name: e.target.  значение });  } onChangePort (e) {this.setState ({порт: e.target.value});  } onSubmit (e) {e.preventDefault ();  const serverport = {имя: this.state.name, порт: this.state.port} axios.post ('http://localhost: 4200/serverport/update/' + this.props.match.params.id, serverport  ) .then (res => console.log (res.data));  this.setState ({имя: '', порт: ''}) this.props.history.push ('/index');  } render () {return (
 
 Изменить новый сервер 
  
  Добавить имя хоста:   
 
  Добавить порт сервера:   
 
  
  
)}  } 

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

//TableRow.jsimport React, {Component} from 'response'; import {Link} from 'response  -router-dom '; импортировать аксиомы из' axios '; класс TableRow расширяет компонент {конструктор (реквизиты) {супер (реквизиты);  this.delete = this.delete.bind (это);  } delete () {axios.get ('http://localhost: 4200/serverport/delete/' + this.props.obj._id) .then (console.log ('Deleted')) .catch (err =>  console.log (err))} render () {return (  {this.props.obj._id}   {this.props.obj.name}   {this.props.obj.port}    Изменить     Удалить    );  }} экспорт TableRow по умолчанию; 

Наконец, наш учебный пример React Express с нуля закончен. Спасибо, что взяли этот пример.

Fork Me On Github