Question

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

我将向您展示我使用的三个文件（.js，.html，.css）。我认为问题与文件没有相互识别或类似的东西有关。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@15.6.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.6.2/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，那么这是指向我的程序的链接。

Answer 1

也许尝试一下create-react-app，它会给你一个交钥匙开发环境和一些模板HTML / CSS / JS。它还可以自动化你可能在这里缺少的很多webpack / babel东西。

使用React与Sublime

1 个答案: