改成字符串就可以了吧  eg：width:'2rem',height:'10vh'

processOn吧

var helloWorld 变成  var  HelloWorld就行了，变量名必须大驼峰写法，因为它是类名

首先创建一个新的React项目

npx create-react-app my-app

在src文件夹下单独建立一个js文件，把每一个组件封装成一个类，

将需要在其他文件引用的类用

export default    类名;

命名导出，进行引用就可以了。

//stateTest.js
import React, { Component } from 'react';
class LightningCounter extends Component {
    constructor(){
        super();
        this.state = {strikes:0};
    }
    getInitialState(){
        return {strikes:0}
    }
    timerTick=()=>{this.setState({strikes:this.state.strikes + 100});}
    componentDidMount=()=>{//组件被浏览器加载之后，没有被调用之前，设置定时器
        setInterval(this.timerTick,1000);}
    render() {
        var counterStyle = {color:"#66FFFF",fontSize:50}
        var count = this.state.strikes.toLocaleString();
        return (<div><h1 style={counterStyle}>{count}</h1></div>)}
  }
  class LightningCounterDisplay extends Component {
      render() {
          var commonStyle = {margin:0,padding:0}
          var divStyle = {width:250,textAlign:"center",backgroundColor:"black",padding:40,color:"#999",fontFamily:"sans-serif",borderRadius:10}
          var textStyle = {emphasis:{fontSize:38,...commonStyle},smallEmpasis:{...commonStyle},small:{fontSize:17,opacity:0.5,...commonStyle}}
          return (
          <div>
              <div style={divStyle}>
              <LightningCounter/>
              <h2 style={textStyle.smallEmpasis}>变更</h2>
              <h2 style={textStyle.smallEmpasis}>地球</h2>
              <p style={textStyle.smallEmpasis}>(加载后)</p>
          </div>
          </div>);}}
  export default LightningCounterDisplay;
  
  
  //index.js
  
  import React,{Component} from 'react';
  import ReactDOM from 'react-dom';
  import * as serviceWorker from './serviceWorker';
  import LightningCounterDisplay from './stateTs';
  ReactDOM.render(
      <div><LightningCounterDisplay /></div>, 
      document.getElementById('root'));
  serviceWorker.unregister();

timerTriker = () =>{

this.setState({

strikes:this.state.strikes+100

})

}

componentDidMount = () => {

setInterval(this.timerTriker,1000)

}

解决了 没有绑定 这2个方法这样写 就可以了

手动输入 127.0.0.1：8000

16.x版本后已经废弃了

在浏览器中输入https://cdn.staticfile.org/react/16.4.0/umd/react.development.js https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js https://unpkg.com/babel-standalone@6.15.0/babel.min.js 这三个地址，将得到的页面全选后复制粘贴到本地的文件中，分别对应react.js、react-dom.js和browser.min.js三个文件

你换个版本试一下，因为新版本可能会改

在jsx的style样式对象中写宽、高等（与数字有关的样式时），不用带单位。

用react-router路由实现最佳。如：你只要设置好布局就ok.

<Link to = "/">跳转到主页面去</Link>&nbsp;&nbsp;

                    <Link to = "/about">跳转到about页面</Link>

                {/*exact 更精准定位，切换路由只包含Home*/}

                    <Route exact path="/" component={Home} />

                    <Route path="/about" component={About} />

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果

重复的代码写成一个组件

this

<script type="text/babel">
    class HelloWorld extends React.Component {
  	   render(){
  		return (<div><p>Hello world!</p></div>);
  		}	
  	}
  	ReactDOM.render(<HelloWorld/>,document.querySelector("#container"));
</script>

子组件获取父组件prosp时，会将父组件所有的props获取过来，你只是分开写了。

需要在LightningCounter的开始就初始化state.strikes
LightningCounter {
    getInitialState:function(){
        return {strikes:value};
    }
    
 }

还可以用 node.js 或其它，只要能开启服务器就行了。。。不过当前课程好像用不到。。。

看看完整代码就知道了。

写错了

可能他想说componentWillMount

不设置高度就是内容的高度，加了padding

因为这是React识别回调函数的写法，onclick是html识别。。。。环境不一样 -  -

import classNames from 'classnames';

<div className={classNames("class1", "class2")}></div>

需要安装classnames包：npm install classnames --save 

test?