Question

我遵循了本指南：https://reactjs.org/docs/add-react-to-a-website.html将.js文件添加到页面中，如下所示：

    <script src="{{ base_url }}/js/reactjs/like_button.js"></script>

然后单击“喜欢”按钮，并显示“您喜欢这个”。单击时。

现在，我想尝试一下“ Hello World”指南：https://reactjs.org/docs/hello-world.html在页面的like按钮元素下添加一个元素。我将以下.js文件添加到页面中，如下所示：

    <script type="text/jsx" src="{{ base_url }}/js/reactjs/helloworld.js"></script>

（我尝试添加type =“ text / jsx”，但似乎无济于事），但#root元素从不显示“ Hello world！”。

我这里想念什么吗？

这些是我在页面底部加载的JS（CDN）文件：

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

我已经安装了NodeJS和NPM / X。但是我尚未在此Hello World示例中使用它。

最后，我只希望React在我的PHP Slim框架项目中用作View（MVC）组件。

Answer 1

尝试将babel添加到您的项目中。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

并将脚本文件的类型更改为“ text / babel”。

<script type="text/babel" src="{{ base_url }}/js/reactjs/helloworld.js"></script>

ReactJS：渲染“ Hello World”组件不起作用

1 个答案: