Question

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <script src='./index.js' type='text/babel'></script>
    <div id="root"></div>
  </body>
</html>

index.js：

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

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

网页完全是空的，尝试重新安装几次反应和反应。 babel或node没有编译错误。该网页只是空的。

Answer 1

以下是开始使用的简单示例！

var
  I: Integer;
begin
  for I := 0 to ListView.Controls.Count-1 do
  Begin
    if ListView.Controls[I].ClassType = TSearchBox then
    begin
      TSearchBox(ListView.Controls[I]).Text := '';
    end;
  End;

  ListView.Items.Filter := nil;

Answer 2

在创建dom元素index.js之后加入div：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src='./index.js' type='text/babel'></script>
  </body>
</html>

当index.js正在执行时，它需要dom元素用反应渲染

填充它

Answer 3

首先，您需要在index.html文件中添加react，reactdom，babel文件。

选项1 ：然后你可以通过在index.html中移动index.js脚本来查看输出，如下所示。您可以通过打开index.html文件来查看输出。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div> 
    <script type="text/babel" >
        ReactDOM.render(
            <h1>Hi! My react App</h1>,
            document.getElementById('app')
        )
    </script>
  </body>
</html>

选项2：添加外部js文件：如果要添加一些外部反应js文件，

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/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" src="index.js" >
    </script>
  </body>
</html>

index.js：

ReactDOM.render(
   <h1>Hi Now your react app works</h1>,
   document.getElementById('root')
);

首先你必须创建一个http服务器。否则，您将在控制台中看到一些文件加载错误，例如仅支持协议方案的交叉源请求：http，数据，chrome，chrome扩展，https。

Steps to create simple http-server using node:
 1) Install node JS -> https://nodejs.org/en/download/
 2) Run: npm install -g http-server
 3) Run: http-server [folderpath]   // folder path which contains index.html

启动http服务器后，您将看到如下所示的消息

 Starting up http-server, serving [folder name]
 Available on:
 http://127.0.0.1:8080
 http://192.168.1.6:8080

现在访问您可以看到index.html输出的网址（http://127.0.0.1:8080）。希望它有所帮助!!!

ReactDOM没有渲染任何东西

3 个答案: