Cara menggunakan PHP dan React untuk pembangunan bahagian hadapan-tutorial php-php.cn

Cara menggunakan PHP dan React untuk pembangunan bahagian hadapan

WBOY

Lepaskan： 2023-05-11 08:58:02

asal

1637 orang telah melayarinya

Dengan perkembangan teknologi rangkaian, pembangunan bahagian hadapan secara beransur-ansur menjadi bahagian yang amat diperlukan dalam pembangunan web Pada masa kini, pembangunan bahagian hadapan melibatkan aliran teknologi yang tidak berkesudahan, dan salah satu rangka kerja bahagian hadapan yang paling popular ialah React. Dan untuk pembangunan back-end, PHP dikenali sebagai salah satu bahasa pembangunan yang paling popular. Dalam artikel ini, kami akan meneroka cara mengintegrasikan PHP dan React untuk pembangunan front-end yang cekap.

1. Pasang PHP dan React

Untuk mula menggunakan PHP dan React untuk pembangunan bahagian hadapan, kami perlu memastikan bahawa PHP dan React dipasang dalam persekitaran setempat. Untuk pemasangan PHP, kami boleh memuat turun terus pakej pemasangan dari laman web rasmi untuk pemasangan. Untuk pemasangan React, anda boleh memasangnya dengan menjalankan arahan berikut di terminal:

npm install -g create-react-app

Salin selepas log masuk

Selepas pemasangan selesai, kami boleh mencipta aplikasi React baharu dengan menjalankan arahan berikut:

create-react-app my-app

Salin selepas log masuk

2. Integrasi PHP dan React

Selepas memasang PHP dan React, kita perlu mengintegrasikannya untuk memudahkan pembangunan. Khususnya, kita perlu memperkenalkan perpustakaan React ke dalam projek PHP dan memaparkannya ke halaman. Untuk membenamkan aplikasi React ke dalam aplikasi PHP, ia boleh dicapai dengan membenamkan kod JavaScript dalam fail PHP.

Berikut ialah fail contoh PHP mudah yang menunjukkan cara mengintegrasikan aplikasi React dalam PHP:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP React Example</title>
    <script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const App = () => {
            return <h1>Hello, World!</h1>
        }

        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );
    </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami memperkenalkan perpustakaan React dan Babel untuk dihimpun dalam penyemak imbas dan melaksanakan kod JSX. Dalam fail PHP, kami membenamkan komponen React dan memaparkannya ke dalam halaman.

3. Gunakan PHP dan React untuk pembangunan bahagian hadapan

Setelah kami menyelesaikan penyepaduan PHP dan React, kami boleh mula menggunakannya untuk pembangunan bahagian hadapan. Khususnya, kami boleh menggunakan PHP untuk memaparkan halaman dinamik sambil membenamkan komponen React dalam halaman ini untuk menambah pengalaman interaktif yang lebih kaya.

Berikut ialah fail PHP ringkas yang menunjukkan cara menggunakan komponen React dalam projek PHP untuk pembangunan bahagian hadapan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP React Example</title>
    <script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
    <?php
    function render_app($name) {
        echo "<div id='root-{$name}'></div>";
        echo "<script type='text/babel'>";
        echo "const App = () => {";
        echo "  return <h1>Hello, {$name}!</h1>";
        echo "}";
        echo "ReactDOM.render(<App />, document.getElementById('root-{$name}'));";
        echo "</script>";
    }

    // 渲染两个不同的 React 组件
    render_app('World');
    render_app('PHP + React');
    ?>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mentakrifkan fungsi render_app, menggunakan Untuk memaparkan komponen React dan membenamkannya ke dalam halaman PHP. Kami memanggil fungsi render_app dua kali untuk memaparkan dua komponen React yang berbeza dan memaparkannya di lokasi yang berbeza pada halaman.

Ringkasnya, sangat mudah untuk menggunakan PHP dan React untuk pembangunan bahagian hadapan. Dengan menyepadukan PHP dan React, kami boleh menggunakan komponen React dalam projek PHP untuk mencapai pengalaman interaktif yang lebih kaya dan menjadikan halaman dinamik melalui PHP.

Atas ialah kandungan terperinci Cara menggunakan PHP dan React untuk pembangunan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!