Question

我有一个基本的HTML / JS项目，并且一直试图对运行做出反应。出于各种原因，我需要从现有项目运行安装React，而不是从create-react-app运行。

项目目录：

|-node_modules
|
|- public
|     |- js
|     |  |- index.js
|     |
|     |- index.html
|
|- package.json
|
| - ...

内部index.js：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
 );

内部index.html：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <div id="root"></div>
    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

在package.json内：

{
  "name": "developer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node_modules/http-server/bin/http-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "http-server": "^0.10.0"
  },
  "dependencies": {
    "react": "15.6.1",
    "react-dom": "15.6.1"
  }
}

超级基础。我正在遵循FB React Installation的指示。但是，当我运行npm start并转到8080时，它会显示一个完全空白的页面。

我错过了什么？

Answer 1

这是没有捆绑设置的最简单的反应实现。

来自文档本身：single-file-example.html

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

＆＃13;

Answer 2

您应该使用webpack或browserify呈现到浏览器中。

Answer 3

您可以将babel与webpack或gulp一起使用来设置您的反应开发环境。 This对事情和入门有很好的解释。

此外，您可以使用create-react-app开始使用您的项目，所有设置都将在手边完成。

Answer 4

如果您使用的反应标记不是HTML标记，但它是反应html标记：

h1：React.HTMLProps

因此，它不会呈现为HTML。这个反应html被称为JSX。浏览器不了解JSX，你需要一个解析器。要解析这个JSX，你可以使用babel。

**所有反应中的html标签都是bot实际的html标签，但反应标签

为什么我的React应用程序无法渲染？

4 个答案: