Javascript 使用升华的麻烦_Javascript_Html_Css_Reactjs

Javascript 使用升华的麻烦

javascript html css reactjs

Javascript 使用升华的麻烦,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我在使用React with Sublime时遇到问题。我是新来的。我无法查看我的html文件。很明显，有些东西丢了或坏了，但我似乎不知道是什么我将向您展示我正在使用的三个文件（.js、.html、.css）。我认为这个问题与文件彼此不认识或类似的事情有关这是第一个文件，它只是一个非常基本的HTML： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g

我在使用React with Sublime时遇到问题。我是新来的。我无法查看我的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>

第三个是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"));

const colorArr=[
“红色”，
“绿色”，
“紫色”，
“橙色”，
“黑色”，
“棕色”，
“黄金”，
“石灰”，
“水族”，
“热粉红”，
“水鸭”
]
类HelloWorld扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
颜色：“蓝色”
};
}
componentDidMount（）{
设i=0；
设置间隔（（）=>{
如果（i<色拉长度）{
这是我的国家({
颜色：colorArr[i]
});
我++
}否则{
i=0；
这是我的国家({
颜色：colorArr[i]
});
}  
}, 700)
}
变更状态（）{
if（this.state.color.localeCompare（“蓝色”）==0）{
这是我的国家({
颜色：“黄色”
});
title.style.color=“黄色”；
}否则{
这是我的国家({
颜色：“蓝色”
});
}
}
输入更改（事件）{
这是我的国家({
颜色：event.target.value
});
}
render（）{
常量styleObj={
背景颜色：this.state.color，
尺寸：21
}
返回(
{this.state.color}
);
}
}
ReactDOM.render(
，document.getElementById（“app”）；

这是我存储它们的文件夹。我看了很多关于入门的教程，但我不知道有什么问题

我最初是用代码笔编码的，因为我无法解决这个问题，但我需要关闭它。如果你想看到我的程序实际运行，这里有一个链接

也许可以尝试一下CreateReact应用程序，它将为您提供一个交钥匙开发环境和一些HTML/CSS/JS模板。它还可以自动处理许多您可能在这里遗漏的网页/巴别塔内容。

我现在真的不想这么做，但创建react应用程序类似于只是react。我指的是它的format and codecreate react应用程序是react，它只是使用npm/npx和react使用的所有支持库和工具快速引导开发环境的一种方法。它只需要不到15分钟的时间就可以到达你想要的位置。值得一试@你说得对，人们会为所欲为。谢谢你的反馈

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"));