@buster
React.js - это библиотека JavaScript для создания пользовательских интерфейсов. Она не является компонентом для работы с базами данных. Для взаимодействия с базой данных MySQL можно использовать серверный язык программирования, например, Node.js.
- Установка необходимых библиотек:
- mysql2 - драйвер для работы с MySQL из Node.js
- sequelize - ORM (Object-Relational Mapping) для удобной работы с базами данных
- express - фреймворк для Node.js, облегчающий написание серверных приложений
- Подключение к базе данных:
1
2
3
4
5
|
const Sequelize = require("sequelize");
const sequelize = new Sequelize("databaseName", "username", "password", {
host: "localhost",
dialect: "mysql",
});
|
- Описание модели таблицы в базе данных:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const User = sequelize.define(
"user",
{
firstName: {
type: Sequelize.STRING,
},
lastName: {
type: Sequelize.STRING,
},
email: {
type: Sequelize.STRING,
unique: true,
},
password: {
type: Sequelize.STRING,
},
},
{
// Настройки
}
);
|
- Выполнение запроса к базе данных:
1
2
3
4
5
|
User.findOne({
where: { id: userId },
}).then((user) => {
console.log(user.firstName);
});
|
- Использование модели вместе с React.js. В React.js обычно используются AJAX-запросы к API на сервере, которые в свою очередь взаимодействуют с базой данных. Например, при создании пользователя на сервере можно создать новую запись в базе данных:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
router.post("/create-user", (req, res) => {
User.create({
firstName: req.body.firstName,
lastName: req.body.lastName,
email: req.body.email,
password: req.body.password,
})
.then((user) => {
res.json(user);
})
.catch((error) => {
console.log(error);
res.json({ error: "Failed to create user" });
});
});
|
- Создание API на сервере для взаимодействия с базой данных. Например, можно создать API для получения списка пользователей:
1
2
3
4
5
|
router.get("/users", (req, res) => {
User.findAll().then((users) => {
res.json(users);
});
});
|
- Использование API на клиенте в React.js:
1
2
3
4
5
6
7
|
fetch("/api/users")
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
|
Таким образом, работа React.js с базой данных MySQL осуществляется через серверный язык программирования с использованием библиотек для взаимодействия с базой данных.
