javascript - Starter "Hello World"React 项目给出空页面

Question

我是 React.js 开发的新手，我尝试了一个简单的 hello world 页面，但我得到了一个空页面，而且我没有收到任何错误。

我使用create-react-app来创建这个项目。创建项目后，我使用 npm 命令启动本地主机，并删除了 src 文件夹中的所有文件。然后我在 src 文件夹中创建了 index.js 和 HelloWorld.jsx 文件。然后我将这些代码写入这些文件中。我得到了空白页。但我想在页面中写入Hello Mark。为什么它的代码给我一个空白页面？

index.js 文件:

import React,{ Component } from 'react';

import HelloWorld from './HelloWorld';

class index extends Component {
  render() {
    return (
      <div className="index">
        <HelloWorld name="Mark" />
      </div>
    );
  }
}

export default index;

HelloWorld.jsx 文件:

import React,{ Component } from 'react';

const HelloWorld = (props) => (
  <div>
    <h2>Hello <em>{props.name}</em></h2>
  </div>
);

export default HelloWorld;

Answer 1

好的，有几件事:

首先，将根组件的名称从 index 更改为 Index。 React 组件应以大写字母开头。

然后，您必须在根级别使用ReactDOM.render()。这实际上启动了所有子组件的渲染和协调过程。

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './HelloWorld';

class Index extends Component {
  render() {
    return (
      <div className="index">
        <HelloWorld name="Mark" />
      </div>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById("app"));

请注意，您还需要一个 index.html 文件，其正文中包含 div 以及与上面的选择器匹配的 id 属性(在此示例中为“app”)。