React学习教程-搭建和初级界面展示（第一次使用markdown）

知识点来源 b站技术胖 他的个人网站 jspang.com

Vue 对比 React

当团队人不多，开发效率快情况 Vue比较适合
项目大，人多，需要复用得代码多得时候，React 比较适合

第一节 React得搭建和初级界面展示

通过使用脚手架得形式

  npm install --g create-react-app

生成简单项目命令 ，然后再新建一个文件夹，相当与你的workplace：“my-app”通过

  create-react-app  my-app

使用Vscode 打开文件夹，一个简单得项目搭建成功了，下面写一个基础练习。

第二节 熟悉react 组件开发

react 通过组件得形式，完成界面得动态渲染，是根据数据的变化而变化，html中 大写字母开头的都是自定义组件，其余的是浏览器支持的原生的html标签。现在写一个按钮的时间绑定

import React,{Component,Fragment} from 'react'

export default class Xiaojiejie extends Component{
    state = {
        inputValue : '',
        serviceList : [
            '精油开背',
            '头部按摩'
        ]
    } 
    //赋值 input
    inputChange(e){
        this.setState({
            inputValue : e.target.value
        })
    }
    addService(){
        this.setState({
            serviceList : [...this.state.serviceList,this.state.inputValue],
            inputValue : ''
        })
    }
    render(){
        return 
            
            增加服务
            

               {
                   this.state.serviceList.map((item,index) => {
                       return 
{item}
                   })
               }
            
        
    }
    
}

犹豫这个代码实在太过简单，就不做分析了。几个需要注意的地方就是， 改变state状态的时候要用setState。
使用this的时候，要bind(this)。

心得体会

1、原来之前看别人的排版都是markdown形式的，今天小露怯了才知道 ，不过还好后面咱们慢慢熟悉，一起用起来。
2、看视频的时候，写到onChange的时候，胖哥用的bind(this) 弹幕疯狂推荐 箭头函数，但是咱也比较笨，不明白怎么用，要是有哪个hxd知道可以评论告诉我，最好来个代码。
3、看视频的时候，觉得太简单了（不是自大狂，有人说我自负，我觉得还好），然后视频里胖哥说，有些人觉得简单就光看，然后一上项目麻爪了不知道要干什么，当时我就不乐意了直接实操了一下。是真不争气啊，一敲全错，一下子认清了自己。以后看视频也好看书也好，一定实操正好练练打字。
4、自己对这个文章的架构啊不是很懂，加一下今后的学习目标，多看别人的文章学习如何起标题。

隔了一天二刷

根据当时的完成效果，自己徒手又来了一遍。

踩雷

无从下手不知道先写什么，缺乏思维导向。setState的时候大小写一定要注意，建议从一开始就设计好命名规则不要将就，要讲究。

会了之前弹幕说的利用箭头函数可以不用再 jsx里面写bind(this)，就是在写方法的时候，格式写成

addService = ()=>{
    //这就是传说的箭头函数
}

犯了一个错误，就是在render方法里面 调用class 里面的方法（render的外面），不能返回jsx语法，也就是说想压缩render里面的return内容，也只能是在render方法里面定义const 常量，然后用{const} 即可。算是今天的收获了吧。
可以，肯定是之前写错了。

类型

js的类型转换是非常灵活的，在元素两边 添加，[] 就变成数组了。所以不要有java的固定思维。

补记一下 后面的功能
加了一个点击删除，一个新的api splice（index，num），从index删除num个元素

    deleteService = index => {
        let newServiceList = this.state.serviceList;
        newServiceList.splice(index,1);
        this.setState({
            serviceList:newServiceList
        })
    }