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

您的导入语句不正确。使用本地导入时，您必须提供文件扩展名。

改变

import HelloWorld from './HelloWorld';

到

import HelloWorld from './HelloWorld.jsx';

编辑：正如 BoyWithSilverWings 指出的那样，该应用程序从未呈现到 DOM 中。你必须迈出这一步。以下是您从中提取的 HelloWorld 示例的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

将其移至索引文件后，您便删除了渲染调用。

Answer 2

好的，有几件事：

首先，将根组件的名称从 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 ").

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

Starter "Hello World" React Project Gives Empty Page

javascript

reactjs

create-react-app