简体   繁体   English

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

[英]New React App without 'creat-react-app' or without webpack

I am new to coding since 3 or 4 months ago and I am trying to set up a react app that does not use npm create-react-app and does not use web pack. 我从3个月或4个月前才开始编写代码,因此我尝试设置一个不使用npm create-react-app且不使用Web Pack的react应用。

The app will be a simple test app to learn how to pass state to components like showing a video from a list of links to the video view. 该应用程序将是一个简单的测试应用程序,用于学习如何将状态传递给组件,例如从指向视频视图的链接列表中显示视频。

I have been able to get the initial code to transpile but not get the react and react-dom.js files to load. 我已经能够获取初始代码进行转换,但是无法加载react和react-dom.js文件。 The live-server error is shown on the bottom, which is reflected in the browser's console also. 实时服务器错误显示在底部,这也反映在浏览器的控制台中。

Here's some of my code related to this : -- package.json ~ 这是与此相关的一些代码:-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>

--- Live-server errors ---实时服务器错误

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

Try adding the react and react-dom dependencies from a cdn. 尝试从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 https://reactjs.org/docs/installation.html#using-a-cdn

This was the path to load the react scripts when installing with npm react , react-dom 这是在使用npm react进行安装时加载react脚本的路径react,dom

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM