В настоящее время у меня есть веб-сайт, написанный на HTML и PHP, который может получить доступ к моей базе данных SQL. Я начал изучать React и хочу, чтобы мой супер простой веб-сайт также подключался к базе данных SQL.
Раньше я делал так:
<php
$conn = mysqli_connect($serverIP, $dbusername,$dbpassword,$dbname);
if (mysqli_errno($conn)) {
die("<p>MySQL error:</p>\n<p>" . mysqli_error($conn) . "</p>\n</body>\n</html>\n");
}
?>
а затем в файле index.php сделайте следующее:
<?php include_once "connection.php"; ?>
И продолжил с базовым SQL для получения данных.
Как мне сделать то же самое в React? В частности, как мне написать PHP в React, чтобы иметь возможность подключаться к базе данных SQL? Как выглядит этот код?
Кроме того, поскольку я изучаю React самостоятельно, было бы здорово, если бы было место, где люди могли бы просматривать код и где я мог бы получить советы по улучшению. Есть ли такой сайт / сообщество?
Я думаю, что вы, возможно, еще не понимаете, как слои хорошо сочетаются друг с другом (не волнуйтесь - это займет некоторое время, чтобы обернуться). В вашем случае код на стороне сервера (PHP) будет выполнять все вызовы вашей базы данных и извлекать / изменять любые данные, которые вам нужны (в конце концов, вы не хотите, чтобы учетные данные вашей базы данных были доступны для просмотра на стороне клиента!).
Чтобы отображать или изменять данные из вашего интерфейса React JS, вам понадобится способ сообщить об этих намерениях серверной части; это можно сделать, создав конечные точки REST в вашей кодовой базе PHP, которые затем вам нужно будет вызвать из вашего кода React JS (для этого вы можете использовать Axios, fetch или многие другие библиотеки HTTP).
Вот супер простой пример, который я взял из / u / roboctocat на Reddit: https://www.reddit.com/r/reactjs/comments/8lb6u3/can_anyone_provide_me_a_basic_example_tutorial/
Ваш клиентский код:
// index.jsx
class MyComponent extends React.Component {
onClick() {
fetch("http://your-php-server/ping-pong.php")
.then(res => res.json())
.then((result) => { console.info(result); })
}
render() {
return (
<button onClick = {this.onClick} />
);
}
}
И ваш серверный код:
// ping-pong.php
<?php
header('Content-Type: application/json');
echo json_encode(array('ping' => 'pong'));
?>