首先創(chuàng)建一個新的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();