React項目指導

原文鏈接：React項目詳解
GITHUB：react-webpack-config
持續更新...

React項目指導

使用webpack需要安裝的依賴

1. webpack，webpack-cli，react，react-dom
2. babel-loader，@babel/core，@babel/preset-env，@babel/preset-react
3. 設置.babelrc，{"presets": ["@babel/preset-env","@babel/preset-react"]}

4. 設置scripts：

    "dev": "webpack --mode development",
    "build": "webpack --mode production"

5. 設置webpack-dev-server：

   devServer: {
     compress: true,
       port: 9000，
       hot: true
   },
   
   "start": "webpack-dev-server --config webpack.config.js" 

6. 設置performance：

   performance: {
     hints: false
   }

Component

1. 基本組件

   let title = <h1>Hello, world!</h1>
   
   ReactDOM.render(title,document.getElementById('root'))

2. 動態組件

   import React from 'react';
   import ReactDOM from 'react-dom';
   
   let displayTime = () => {
     let nowTime = (
       <div>
         <span>現在時間：{new Date().toLocaleTimeString()}</span>
       </div>
     );
     ReactDOM.render(t
       nowTime,
       document.getElementById('root')
     );
   };
   
   setInterval(displayTime, 1000);

3. class組件構建器

   import React, {Component} from 'react';
   import ReactDOM from 'react-dom';
   
   class HelloTitle extends Component {
     render() {
       return <h1>Hello,World!</h1>
     }
   }
   
   ReactDOM.render(
     <HelloTitle/>,
     document.getElementById('root')
   );

4. props屬性

   import React, {Component} from 'react';
   import ReactDOM from 'react-dom';
   
   class HelloTitle extends Component {
     render() {
       return <h1>Hello,{this.props.name}!</h1>
     }
   }
   
   let titleDiv = (
     <div>
       <HelloTitle name="React"/>
       <HelloTitle name="World"/>
     </div>
   );
   
   ReactDOM.render(
     titleDiv,
     document.getElementById('root')
   );

5. props多層使用

   import React, {Component} from 'react';
   import ReactDOM from 'react-dom';
   
   class HelloTitle extends Component {
     render() {
       return <h1>Hello,{this.props.name}!</h1>
     }
   }
   
   class HelloDiv extends Component {
     render() {
       return <div><HelloTitle name={this.props.name}/></div>
     }
   }
   
   ReactDOM.render(
     <HelloDiv name="React"/>,
     document.getElementById('root')
   );

6. 組件複用

   import React, {Component} from 'react';
   import ReactDOM from 'react-dom';
   
   class HelloTitle extends Component {
     render() {
       return <h1 style={this.props.style}>{this.props.content}</h1>
     }
   }
   
   class HelloDiv extends Component {
     render() {
       return <div>
         <HelloTitle content="比較大的字" style={{'fontSize': 18}}/>
         <HelloTitle content="比較小的字" style={{'fontSize': 12}}/>
       </div>
     }
   }
   
   ReactDOM.render(
     <HelloDiv/>,
     document.getElementById('root')
   );

Component的狀態state和生命週期

state屬性

constructor(props) {
  super(props);
  this.state = {
    time: new Date().toLocaleTimeString()
  }
}

render() {
  return <h1>現在時間是{this.state.time}</h1>
}

組件構建完成後先執行的動作，componentDidMount()：

componentDidMount() {
  let upTime = () => {
    this.setState({time: new Date().toLocaleTimeString()})
  };
  setInterval(upTime, 1000)
}

setState()修改狀態值

this.setState({time: new Date().toLocaleTimeString()})