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;