React.js

常规做法是使用框架如 Next.js ，非常规做法是 HTML 直接引用 React.js 。

安装 Nginx 。

切换到站点文件夹。

新建文件 books.json 。

[
    {
        "id": 1,
        "name": "西游记"
    },
    {
        "id": 2,
        "name": "水浒传"
    },
    {
        "id": 3,
        "name": "三国演义"
    },
    {
        "id": 4,
        "name": "红楼梦"
    }
]

新建文件 books-react.html 。

<html>

<head>
    <meta charset="utf-8" />
    <title>图书</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/babel">
        function App() {
            const [records, setRecords] = React.useState([]);
            React.useEffect(() => {
                fetch('/books.json').
                    then(response => response.json()).
                    catch(error => {
                        console.error(error);
                    }).
                    then(records => {
                        setRecords(records);
                    });
            }, []);

            return (
                <div>
                    <ul>
                        {records.map(record =>
                            <li key={record.id}>{record.name}</li>
                        )}
                    </ul>
                </div>
            );
        }
        const app = ReactDOM.createRoot(document.getElementById('app'));
        app.render(<App />);
    </script>
</body>

</html>

访问 http://localhost/books-react.html 。

React.js ​

React.js