【问题标题】:Creating a Simple React CDN Boilerplate?创建一个简单的 React CDN 样板?
【发布时间】:2019-09-28 02:03:03
【问题描述】:

REACT HELP:尝试构建一个非常基本的 React 样板,因为执行 Create-React-App 对于一些基本实践来说似乎有点过头了。在这个 repo 中有两个样板文件,第二个有效,但所有代码都在一个文件中。第二个文件指向 start.js 作为应用程序组件,但是当我在浏览器中运行它时,什么也没有出现。我忽略了什么,我看过其他几个样板,似乎我在做任何不同的事情。

https://git.generalassemb.ly/AlexMerced/PracticeRepo/tree/master/react

【问题讨论】:

    标签: javascript reactjs


    【解决方案1】:

    您正在尝试import React from "react" 不存在。在独立版本中,我认为您将获得全局 React 和 ReactDOM 对象。您可以使用它们来呈现组件。从下面的 start.js 编辑代码中删除 import 语句。

    class Greeting extends React.Component {
      render() {
        return <p>Hello world</p>;
      }
    }
    ReactDOM.render(<Greeting />, document.getElementById("start"));
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>React Boilerplate</title>
    
    
    
      </head>
      <body>
        <div id="start"></div>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone@7.6.2/babel.min.js"></script>
        <script type="text/babel" src="./start.js"></script>
    
      </body>
    </html>

    【讨论】:

    • 我很欣赏这个建议,但这似乎也不起作用,其他人建议在 start.js 的末尾添加一个导出语句,这也不起作用。
    • 我已将相同的代码加载到公共 URL。 agitated-wiles-8a4b8b.netlify.com 你能不能看一下,让我知道这里有什么问题。如果这没有帮助,请告诉我。您可以进行浏览器检查并验证其与我发布为答案的代码相同
    • 是的,不能在我的笔记本电脑上工作,但我试图在文件夹中除了 index.html 和 start.js 之外什么都没有运行,我会将文件更多到另一台设备,看看我是否得到不同的结果。我想我会继续 CRA 应用程序,它只是将这么多文件加载到文件夹中以进行基本练习。
    • 好的,自从这个问题以来已经有一段时间了,除了导入语句之外,我事后发现的另一个问题是我试图在不运行像 lite-server 这样的服务器的情况下运行反应,所以 Babel 无法翻译JSX。所以设置是正确的,只是不知道我必须运行服务器而不仅仅是在浏览器中打开文件,现在我聪明多了:)。希望这可以帮助像我一样困惑的未来婴儿开发者。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-05
    • 1970-01-01
    • 1970-01-01
    • 2013-03-28
    • 1970-01-01
    • 2011-02-14
    相关资源
    最近更新 更多