Как подключиться к базе данных SQL с реагировать?

Question

В настоящее время у меня есть веб-сайт, написанный на 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 самостоятельно, было бы здорово, если бы было место, где люди могли бы просматривать код, и где я мог бы получать советы по улучшению.Есть ли такой сайт / сообщество?

Answer 1

Я думаю, что вы, возможно, еще не понимаете, как слои вполне сочетаются друг с другом (не волнуйтесь - это займет некоторое время, чтобы обернуть голову).В вашем случае ваш код на стороне сервера (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.log(result); }) 
    }

    render() { 
        return ( 
            <button onClick={this.onClick} /> 
        ); 
    } 
}

И код вашего сервера:

// ping-pong.php
<?php
    header('Content-Type: application/json'); 
    echo json_encode(array('ping' => 'pong')); 
?>