反应组件不从依赖项渲染
[英]React components not rendering from dependencies
问题描述
I'm following the React tutorial and building a React/Express app based on the repository in github . 
我正在关注React教程并基于github中的存储库构建一个React / Express应用程序。
In the tutorials index.html all React dependenices are listed in this file as: 在教程index.html所有React依赖项在此文件中均列出为：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Tutorial</title> <!-- Not present in the tutorial. Just for basic styling. --> <link rel="stylesheet" href="css/base.css" /> <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script> <script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel" src="scripts/example.js"></script> <script type="text/babel"> // To get started with this tutorial running your own code, simply remove // the script tag loading scripts/example.js and start writing code here. </script> </body> </html>
However when I add the React packages I need into the package.json dependencies as: 但是，当我添加React软件包时，我需要将其放入package.json依赖项中，如下所示：
{
"name": "react_example",
"version": "1.0.0",
"description": "A simple react example",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.14.0",
"babel-standalone": "^6.17.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"react": "^15.3.2",
"react-dom": "^15.3.1"
},
"devDependencies": {}
}
I then include these in the example.js file as: 然后，将它们包含在example.js文件中，如下所示：
require('babel-standalone');
var React = require('react');
var ReactDOM = require('react-dom');
var axios = require('axios');
Nothing is rendered and in the browser console I get an error: 什么都没有呈现，并且在浏览器控制台中出现错误：
example.js:19 Uncaught SyntaxError: Unexpected token <
Where line 19 is: 第19行是：
<div className="comment">
I'm a novice with React and want to find out how I can render React components. 我是React的新手，想了解如何渲染React组件。
2 个解决方案
解决方案1
0 2016-10-14 17:06:49
I have put together the steps to get React working with Webpack . 我已经汇总了使React与Webpack一起使用的步骤。 If you follow the article, you will get a React application with minimal scaffolding. 如果您遵循本文，您将获得一个最少的脚手架的React应用程序。
babel-core is required for babel to work. babel-core是babel运作所必需的。 babel-preset-react is for JSX compilation. babel-preset-react用于JSX编译。 babel-preset-es2015 is for transpilation from es6 to es5. babel-preset-es2015用于从es6到es5的移植。 babel-loader is required for webpack to build. 要构建webpack，需要babel-loader。
In your case, most likely babel-preset-react or equivalent script is not available for compiling JSX to JS. 在您的情况下，最有可能的babel-preset-react或等效脚本无法用于将JSX编译为JS。
解决方案2
0 2016-10-14 17:16:11
You are mixing two methods of development together in one. 您将两种开发方法混合在一起。 The example mentioned here is compiling all JSX syntax and on the fly in the browser and contains compiled react scripts as below 此处提到的示例正在浏览器中即时编译所有JSX语法，并且包含如下所示的已编译的react脚本
<script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script>
In the example.js you are not required to require these as you can see here in which you have written import statements. 在example.js您require这些，因为您可以在此处看到其中编写了import语句的地方。
require('babel-standalone');
var React = require('react');
var ReactDOM = require('react-dom');
var axios = require('axios');
They have used npm to run a simple node server(and not to compile react/babel) that can serve as simple API endpoint. 他们使用npm运行一个可以用作简单API端点的简单节点服务器（而不是编译react / babel）。 This example is only to learn react with minimal setup and hence i don't suggest you to use it to build any application. 这个例子只是为了学习以最小的设置做出反应，因此我不建议您使用它来构建任何应用程序。
I hope you are trying to use npm as the package manager/development environment and start developing. 我希望您尝试将npm用作程序包管理器/开发环境并开始开发。 For this there are lots of tutorials like this . 对于这个有很多类似的教程这样 。
EDIT 编辑
Remove the below scripts and i hope it should start rendering 删除以下脚本，我希望它应该开始渲染
<script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
EDIT 2 编辑2
Change you index.html to something similar to below 将您的index.html更改为类似于以下内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" src="scripts/example.js"></script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.