html页面代码太多 分割,现在所有代码都写在一个HTML中，在实际项目中应用时，如何进行拆分呢，这样写代码是不是太多了...

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

{count}

)}

}

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 (

变更

地球

(加载后)

);}}

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(

document.getElementById('root'));

serviceWorker.unregister();