PHPer的React實戰之路 —H5

1.  公司要求使用facebook的create-react-app來開發H5頁面；以下是使用過程中碰到的問題

2. 開發流程：

    （1）安裝 goole 擴展程序 React Developer Tools（react開發工具）

    （2）下載 create-react-app

    npx create-react-app my-app
    cd my-app

    （3）啓動一個服務，來監聽文件的變化：類似browser-sync的功能；

            使用的指令是：npm   start   （start 在package.js 文件中的scripts標籤裏面）

            問題 1：如圖 ，npm 的版本 問題 

                 

解決方案：更新npm的版本   npm install  -g   npm@latest

    問題 2 ：react-script  start      指令react-script 未找到，如圖

解決方案：刪除modules ： rm  -rf node_modules    再次安裝modules ： npm insatll

               然後全局安裝  react-scripts  包： npm  install  -g  react-scripts

                再局部安裝react-scripts  包：npm  install  -g  react-scripts  --save

    （4）React開發中的問題：

            getinintalState() 方法在ES6語法中，已經不存在了；直接使用state ={ }；即可

    （5）在ES6中，爲了保證this對象的一致性，用戶自定義的方法，儘量使用箭頭函數，箭頭函數能夠保證內外對象的一致性。

語法： 函數名 =（參數列表）=> {  //邏輯代碼   函數內this 對象 和函數外的this對象 始終是一個對象，是固定不變的 }

import React from 'react';
import { Form, Input, Button,Tooltip } from 'antd';
import Axios from 'axios';
import './FormComponent.css';
const {TextArea} = Input;

class FormComponent extends React.Component {
  constructor(props) {
      super(props);
  }
  state = {
    loading:false,
    iconLoading:false,
    TextAreaValue:'',
    title:'歡迎語不能爲空'
  };

  //點擊按鈕事件

enterIconLoading = () => { this.setState({ iconLoading: true }); //發送ajax請求 let url = this.props.url ? this.props.url :'https://a.speaka.cn'; let data = { teamWelcom : this.state.TextAreaValue }; this.setState({ iconLoading: true }); //發送ajax請求 let url = this.props.url ? this.props.url :'https://a.speaka.cn'; let data = { teamWelcom : this.state.TextAreaValue };

Axios.post(url,data).then(function(response){ console.log(response); }).catch(function(error){ console.log(error); }); } handleSubmit=(e)=>{ this.setState({ TextAreaValue : e.target.value }); } render(){ return ( <div className="container"> <div className="c_top"> <h1>設置班級歡迎語</h1> <p></p> </div> <div className="c_center"> <Form> <div className="c_info"> <Tooltip placement="top" title={this.state.title}> <TextArea placeholder="班級歡迎語" value={this.state.TextAreaValue} autosize={{ minRows:4, maxRows: 18 }} onChange={this.handleSubmit}> </TextArea> </Tooltip> </div> <div className="btn-width"> <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}> Submit </Button> </div> </Form> <div className="cc_tip"> <p className="cc_t_p1">其 身 正,不 令 而 行</p> <p className="cc_t_p2">其 身 不 正,雖 令 不 從</p> <p className="cc_t_p3">----孔子</p> </div> </div> <div className="c_bottom"> <img className="img_icon img_icon_1" src="http://s.speaka.cn/static/2.png"/> <img className="img_icon img_icon_2" src="http://s.speaka.cn/static/3.png"/> <img className="img_icon img_icon_3" src="http://s.speaka.cn/static/4.png"/> <img className="img_icon img_icon_4" src="http://s.speaka.cn/static/5.png"/> </div> </div> ); } } export default FormComponent;