初识react

HelloWord小demo

• 官网
• 首先创建React项目

npx create-react-app my-app
cd my-app
npm start

注意:
第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

使用react做一个列表

app.js

/*ReactDOM.render(
    

        Add
        

            < li className="list-group-item"> Cras justo odio < a className="right" href="#"> update remove
            

                enableremove
            
        
    
,
    document.getElementById('example')
);*/

//里面的内容 我们叫做ItemEditor
const ItemEditor = React.createClass({

    getInitialState() {
        return {
            value: this.props.value
        }
    },
    changeHandle(event) {
        this.setState({
            value: event.target.value
        })
    },

    remove() {
        //removeItemEditor(id)
        this.props.onRemove(this.props.id);
    },
    save() {
        this.props.onSave(this.props.id, this.state.value)
    },

    render() {
        // this.props.onRemove
        return (
            

                {this.props.id}
                enableremove
            
        )
    }
});
//每一行 叫做Item
const Item = React.createClass({

    //this.prpos.onEdit -> function
    edit() {
        this.props.onEdit(this.props.id, this.props.value)
    },
    remove() {
        this.props.onRemove(this.props.id)
    },
    render() {
        return (
            < li className="list-group-item"> {this.props.value} < a className="right" href="#"
                                                                     onClick={this.edit}> update remove
        )
    }
});
//组件划分（整体称为list）
const List = React.createClass({

    getInitialState() {
        /*返回默认的状态数据*/
        return {
            //初始化key
            key: 0,
            list: new Map(),
            editList: new Map()
        }
    },

    add() {
        const key = ++this.state.key;
        this.state.editList.set(key, '');
        //强制刷新页面
        this.forceUpdate();
    },
    remoteItem(id) {
        this.state.list.delete(id);
        this.forceUpdate();
    },
    remoteItemEditor(id) {
        this.state.editList.delete(id);
        this.forceUpdate();
    },
    save(id, value) {
        this.state.editList.delete(id);
        this.state.list.set(id, value);
        this.forceUpdate();
    },
    edit(id, value) {
        this.state.list.delete(id);
        this.state.editList.set(id, value);
        this.forceUpdate();
    },
    render() {
        const listDOM = [];
        const editListDOM = [];


        for (let entity of this.state.list) {
            //item 是实体
            listDOM.push()
        }

        for (let entity of this.state.editList) {
            editListDOM.push()
        }

        return (
            

                Add
                

                    {/*//此处添加子元素，（可编辑的与不可编辑的）*/}
                    {/*
                    */}
                    {listDOM}
                    {editListDOM}
                
            
        );
    }
});

//渲染页面
ReactDOM.render(
    ,
    document.getElementById('example')
);

example.html

css.css

.right{
    float: right;
}
.list-group-item a {
    margin-left: 10px;
}
.item-edit {
    outline: none;
    border-width: 0 0 1px 0;
}

image.png

对上述进行改造，应用实际开发中

//每一行 叫做Item
const Item = React.createClass({

    getInitialState() {
        return {
            // value: '',
            isEdit: true
        }
    },

    //this.prpos.onEdit -> function
    edit() {
        this.setState({
            isEdit: true
        })
    },
    remove() {
        //removeItemEditor(id)
        this.props.onRemove(this.props.id);
    },
    save() {
        this.props.onSave(this.props.id, this.refs.inputText.value);
        this.setState({
            isEdit: false
        })
    },
    render() {
        return (
            this.state.isEdit ?
                

                    {this.props.id}
                    enableremove
                
                :
                < li className="list-group-item"> {this.props.value} < a className="right" href="#"
                                                                         onClick={this.edit}> update remove
        )
    }
});
//组件划分（整体称为list）
const List = React.createClass({

    getInitialState() {
        /*返回默认的状态数据*/
        return {
            //初始化key
            key: 0,
            list: new Map(),
        }
    },

    add() {
        const key = ++this.state.key;
        this.state.list.set(key, '');
        //强制刷新页面
        this.forceUpdate();
    },
    remoteItem(id) {
        this.state.list.delete(id);
        this.forceUpdate();
    },
    save(id, value) {
        this.state.list.set(id, value);
        this.forceUpdate();
    },

    render() {
        const listDOM = [];
        for (let entity of this.state.list) {
            //item 是实体
            listDOM.push()
        }
        return (
            

                Add
                

                    {listDOM}
                
            
        );
    }
});

//渲染页面
ReactDOM.render(
    ,
    document.getElementById('example')
);