如何将 ReactJS 应用程序与 Wagtail 集成 API。要遵循的步骤？

Question

我正在尝试在 ReactJS 中编写应用程序，后端将使用 Wagtail API。我正在尝试找出所有 steps/what 所有配置都需要在前端以及后端完成以将 ReactJS 与 Wagtail 集成？

Answer 1

使用哪个后端并不重要。您只需要在 React 中从 API 调用服务。

小例子：

文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

export class ReactApp {
    static renderService(props, element) {
        ReactDOM.render(<App {...props}/>, element);
    }
}

window.ReactApp = ReactApp;

文件App.js

import React from 'react';

class App extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            data: null,
            inProgress: false
        }
    }

    async fetchData(url) {
        return await fetch(url)
            .then((response) => response.json())
            .then(data => this.setState({data}))
            .finally((e) => {
                this.setState({inProgress: false})
            });
    }

    componentDidMount() {
        this.fetchData(this.props.url);
    }


    render() {
        const {data, inProgress} = this.state;

        return (
            <div className="app">
                {
                    !inProgress && data &&
                    (
                        <div className="app__list">
                            {
                                data.map(item => <span className="app__list-item">{item.title}</span>)
                            }
                        </div>
                    )
                }
            </div>

        );
    }
}

export default App;

然后使用带有 index.js 入口点的 webpack 构建你的 js 代码，并在你的 html

中调用它

<div id="app"></div>
<script  type="text/javascript" src="build.js"></script>
<script>
    ReactApp. renderService({url: 'https://yourApiUrl'}, document.getElementById('app'));
</script>

如何将 ReactJS 应用程序与 Wagtail 集成 API。要遵循的步骤？

How to integrate ReactJS application with Wagtail API. Steps to follow?

javascript

web-frontend

reactjs

wagtail

wagtail-apiv2