Привет !!

Если вы хотите разработать приложение MERN (MySQL / Express / React / Node.js) Stack, то это руководство для «вас». В следующем разделе я покажу вам шаг за шагом, как настроить эти технологии на вашем локальном компьютере.

Предпосылка

Я предположил, что у вас …….

  1. Лучшее интернет-соединение
  2. Узел / Npm установлен на вашем локальном компьютере
  3. Некоторые базовые знания команд терминала
  4. Сервер MySQL установлен… ..

Что вы узнаете из этого руководства

  1. Как создать базовое приложение для реагирования…
  2. Подключение сервера Express к базе данных MySQL…
  3. Как правильно управлять серверной и клиентской стороной.

Шаг 1 (настройка для основного приложения React)

Согласно сайту Facebook response.js, создать приложение для реагирования - лучший и удобный способ создания одностраничного приложения в React.

Сначала мы должны установить приложение React глобально на наш компьютер, войти в свой терминал и ввести…

npm i -g create-react-app

(здесь -g относится к глобальной установке, вам может потребоваться sudo перед указанной выше командой, если у вас нет доступа к root)

Затем мы создадим приложение для реагирования, просто написав следующую команду в терминале….

create-react-app my_app

(здесь my-app - это каталог (папка), в котором создается ваше приложение для реагирования)

После создания приложения реакции введите следующую команду, чтобы запустить приложение в браузере… ..

cd my_app
npm install && npm start

После выполнения вышеуказанных команд вы увидите следующий экран в своем браузере, запущенном на localhost: 8080 (8080 - порт по умолчанию).

Большой!! *** вы создали свое первое приложение для реагирования ***

Шаг 2 (создание экспресс-сервера)

Чтобы обрабатывать клиентскую и серверную стороны отдельно, создайте новую папку Client в каталоге my_app (my_app / Client) и скопируйте все файлы и папки каталога my_app в папку Client. Ваш каталог Client выглядит так… …

Затем создайте каталог сервера (my_app / Server) и введите следующую команду…

cd Server
npm init

После выполнения вышеуказанной команды терминал задаст вам несколько вопросов, таких как имя, версия, описание, автор, как вы можете видеть ниже на рисунке….

Следующим шагом будет установка экспресса, поэтому перейдите в терминал и введите

npm install --save express

Чтобы убедиться, что express установлен или нет в каталоге вашего сервера, вы можете проверить файл package.JSON в каталоге сервера, он выглядит как… ..

Как вы можете видеть номер версии Express в разделе зависимостей, это означает, что экспресс установлен….

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

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/', function(req, res){
   res.send("Hello world!");
});
app.listen(port, () => console.log('Listening on port ${port}'));

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

node app.js

(Приведенная выше команда запустит сервер на порту № 5000, когда вы откроете URL-адрес «localhost: 5000» в своем браузере, вы увидите «hello world»)

Шаг 3 (установка MySQL)

Чтобы подключить сервер с mysql, сначала мы должны установить пакет mysql npm с помощью следующей команды…

npm install --save mysql

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

const mysql = require('mysql');
const con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'pass',
database: 'Form'
});
con.connect(function (err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log("Connected!");
});

(В приведенном выше коде вы должны использовать свой собственный идентификатор пользователя, пароль и имя базы данных)

После добавления этого фрагмента кода в файл app.js он будет выглядеть так….

Ооо !! Отлично, вы выполнили установку …… ..

Чтобы понять эти технологии индивидуально, вы можете перейти по следующим ссылкам: -

  1. React.js
  2. "Выражать"
  3. MySQL

В следующем блоге я дам краткое описание фреймворка response.js.

😊😊Спасибо 😊😊