Question

我是react的初学者，我正在阅读官方文档以拥有良好的基础，除了在我执行codeopen上给出的示例时，它可以工作，但我不知道如何使其在我的项目中工作。

此示例https://codepen.io/gaearon/pen/zKRGpo?editors=0010

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

它在Codepen上运行良好，但在我的项目中却无法运行。如何在App上导出此代码以使其正常工作。对不起，我的英语

Answer 1

如果没有完成...

安装节点
安装npm

在终端

npm install create-react-app -g
create-react-app <folder_name>

将代码从沙箱复制到src文件夹

在终端

npm run start

Answer 2

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

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

我认为您需要像这样在项目中导入react和react-dom

Answer 3

npm install -g create-react-app

注意：我假设您已经在计算机上安装了node和npm

npx create-react-app appname

在src文件夹中编辑App.js / Index.js并添加您的代码

运行您的项目

npm start

Answer 4

我要做的是遵循以下步骤：

https://reactjs.org/docs/create-a-new-react-app.html

这将为您提供有关如何启动React App的指南

运行代码时是否收到任何错误？

它可能无法正常工作的多种原因

确保您拥有

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

您正在编辑的文件的顶部

也许还可以通过React上的一些youtube教程来学习，以便它使您对结构设置，创建新组件，传递道具，状态等有基本的了解。

我总是发现Traversy Media很好地解释了主题：

https://www.youtube.com/watch?v=sBws8MSXN7A

我在我的项目react.js上运行此代码有麻烦

4 个答案: