首先创建一个新的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();