在 Sublime 中使用 React 的问题

伊斯梅尔优素福

我在使用 React 和 Sublime 时遇到问题。我是 React 的新手。我无法查看我的 html 文件。有些东西显然丢失或损坏了，但我似乎无法弄清楚它是什么。

我将向您展示我正在使用的三个文件（.js、.html、.css）。我认为问题与无法识别彼此的文件或类似问题有关。

这是第一个文件，它只是一个非常基本的 HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="testReact.css">
</head>
<body>
    <div id="app"></div>
    <script src="app.js" type="text/babel"></script>
</body>
</html>

这是第二个：-

html,body{
  display: flex;
  justify-content: center;
}

.butt{
  margin-top: 36px;
}

div#testId{
  margin-top: 36px;
  padding-bottom: 36px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 500px;

}

第三个是一个 js 文件，我可以在其中保留我的组件：-

const colorArr = [
  "red",
  "green",
  "purple",
  "orange",
  "black",
  "brown",
  "gold",
  "lime",
  "aqua",
  "hotpink",
  "teal"
]
class HelloWorld extends React.Component{

  constructor(props){
    super(props);

    this.state={
      color: "blue"
    };
  }

  componentDidMount(){
    let i = 0;
    setInterval(() => {
      if(i < colorArr.length){
        this.setState({
          color: colorArr[i]
        });
        i++
      }else{
        i = 0;
        this.setState({
          color: colorArr[i]
        });
      }  
    }, 700)
  }

  changeState () {
    if(this.state.color.localeCompare("blue") == 0){
      this.setState({
        color: "yellow"
      });
      title.style.color = "yellow";
    }else{
      this.setState({
        color: "blue"
      });
    }

  }
  inputChange(event) {
    this.setState({
      color: event.target.value
    });
  }

  render() {

    const styleObj = {
      backgroundColor: this.state.color,
      fontSize: 21 
    }
    return(
      <div id="testId" style={styleObj}>
        <button className="butt">
          {this.state.color}
        </button>
        <input onChange={this.inputChange.bind(this)}/>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <HelloWorld name="Hanad" /> 
  </div>, document.getElementById("app"));

这是我存储它们的文件夹。我看过大量的入门教程，但我只是不明白它有什么问题。

我最初是用代码笔编码的，因为我无法解决这个问题，但我需要关闭它。如果您想查看它实际运行https://codepen.io/ismail007/pen/ZxvYoE，请访问我的程序的链接。