Question

我关注React tutorial并根据github中的存储库构建React / Express应用。

在教程index.html中，所有React依赖项都在此文件中列为：

＆＃13;

<!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>

＆＃13;

然而，当我将所需的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": {}
}

然后我将这些文件包含在example.js文件中：

require('babel-standalone');
var React = require('react');
var ReactDOM = require('react-dom');
var axios = require('axios');

没有渲染，在浏览器控制台中我收到错误：

example.js:19 Uncaught SyntaxError: Unexpected token <

第19行是：

<div className="comment">

我是React的新手，想知道如何渲染React组件。

Answer 1

我已经汇总了获得React working with Webpack的步骤。如果您按照这篇文章进行操作，您将获得一个具有最少脚手架的React应用程序。

巴贝尔工作需要babel-core。 babel-preset-react用于JSX编译。 babel-preset-es2015用于从es6到es5的转换。建立webpack需要使用babel-loader。

在您的情况下，很可能babel-preset-react或等效脚本无法用于将JSX编译为JS。

Answer 2

您将两种开发方法合二为一。提到的示例here正在编译所有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>

在example.js中，您不需要require这些，因为您可以看到here已编写导入语句。

require('babel-standalone');
var React = require('react');
var ReactDOM = require('react-dom');
var axios = require('axios');

他们使用npm运行一个简单的节点服务器（而不是编译react / babel），它可以作为简单的API端点。这个例子只是为了学习用最少的设置做出反应，因此我建议你不要用它来构建任何应用程序。

我希望您尝试使用npm作为包管理器/开发环境并开始开发。为此，有许多教程，如this。

修改

删除以下脚本，我希望它应该开始渲染

<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>

编辑2

将index.html更改为类似于下面的内容

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Tutorial</title>  <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>

无法从依赖项呈现的组件

2 个答案: