1-1-课程导学

js,es6,webpack,npm

第二章react初探

2-1react.js简介

react fiber是16版本或者16版本的底层实现

相对于vuejjs更加灵活vueapi更多的，

开发环境搭建

引入.js文件来使用react

通过脚手架工具来编码

cd todolist

yarn start

2-3工程目录文件简介

pwa写网页的形式写手机app应用的，

https协议的服务器上的，断网了第二次看的时候还是能看到的

registerServiceWorker

app.test.js自动话测试的文件

pwa serviceWorker

网页写好了之后访问一次，再次访问的时候会有完整的缓存

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

react当中组件

3-1使用react编写todolist功能

import React,{Component,Fragment} from 'react';
class TodoList extends Component {
    render(){
        return(
            
            <Fragment>
            <div> 
                <input/>
                <button>提交</button>
            </div>
            <ul>
                <li>学英语</li>
                <li>学数学</li>
            </ul>
            </Fragment>
          
        )
    }
}
export default TodoList;

react当中的响应式思想和事件绑定

import React,{Component,Fragment} from 'react';
class TodoList extends Component {
    constructor(props){
        super(props);
        this.state= {
            inputValue:'',
            list:[]
        }
    }
    render(){
        return(
            
            <Fragment>
            <div> 
                <input value={this.state.inputValue}
                onChange={this.handleInputChange.bind(this)}
                />
                <button>提交</button>
            </div>
            <ul>
                <li>学英语</li>
                <li>学数学</li>
            </ul>
            </Fragment>
          
        )
    }
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    
    }
}
export default TodoList;

state不允许我们做任何的该笔那

immutable

增加删除功能

import React,{Component,Fragment} from 'react';
class TodoList extends Component {
    constructor(props){
        super(props);
        this.state= {
            inputValue:'',
            list:[]
        }
    }
    render(){
        return(
            
            <Fragment>
            <div> 
                <input value={this.state.inputValue}
                onChange={this.handleInputChange.bind(this)}
                />
                <button>提交</button>
            </div>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                        <li key={index} 
                        onClick={this.handleItemDelete.bind(this,index)}>{item}</li>)
                    })
                }
            </ul>
            </Fragment>
          
        )
    }
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        }) 
    
    }
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue]
            inputValue:''
        })
    }
    handleItemDelete(index){
        //state不允许我们做人恶化的噶便
        const list=[...this.state.list];
        list.splice(index,1);
        console.log(index);
        this.setState({
            list:list
        })
    }
}
export default TodoList;

如何编写注释？

jsx当中的一个组件

使用样式名字使用className

dangerouslySetInnerHTML={{__html:item}}

拆分组件和组件化

声明式开发

可以和其他框架并存

组件化

第1-3章react初探，react基础精讲