Question

我是3或4个月前编码的新手，我正在尝试设置一个不使用npm create-react-app并且不使用web pack的反应应用程序。

该应用程序将是一个简单的测试应用程序，用于了解如何将状态传递给组件，例如从视频视图的链接列表中显示视频。

我已经能够获得初始代码以进行转换，但是没有得到react和react-dom.js文件来加载。实时服务器错误显示在底部，也反映在浏览器的控制台中。

以下是我的一些与此相关的代码： - package.json~

  },
  "homepage": "https://github.com/dgales4130/PuppyBowl#readme",
  "dependencies": {
    "babel-watch": "^2.0.7",
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "live-server": "^1.2.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "es6-module-transpiler": "^0.10.0",
    "babel-cli": "^6.6.5",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-core": "^6.26.0"
  }

- INDEX

 <!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles/style.css">
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script src="node_modules/react/dist/react.js"></script>
  <script src="node_modules/react-dom/dist/react-dom.js"></script>

</head>

  <body>
    <div id"app"> </div>
  <script src="src/data/data.js"></script>
  <script src="compiled/src/components/App.js"></script>
  <script src="compiled/src/index.js"></script>
  </body>

---实时服务器错误

GET /node_modules/react/dist/react.js 404 104.505 ms - 45
GET /node_modules/react-dom/dist/react-dom.js 404 105.743 ms - 53
GET /node_modules/react/dist/react.js 404 5.843 ms - 45
GET /node_modules/react-dom/dist/react-dom.js 404 2.695 ms - 53

Answer 1

尝试从cdn添加react和react-dom依赖项。

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

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

https://reactjs.org/docs/installation.html#using-a-cdn

Answer 2

这是使用npm react，react-dom

安装时加载react脚本的路径

<script  src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>

新的React App没有'creat-react-app'或没有webpack

2 个答案: