初识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(
    <div>
        <button className="btn btn-default">Add</button>
        <ul className="list-group">
            < li className="list-group-item"> Cras justo odio < a className="right" href="#"> update </a><a
                className="right" href="#">remove</a></li>
            <li className="list-group-item">
                <input className="item-edit"/><a href="#">enable</a><a href="#">remove</a>
            </li>
        </ul>
    </div>,
    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 (
            <li className="list-group-item">
                {this.props.id}
                <input className="item-edit" onChange={this.changeHandle} value={this.state.value}/><a href="#"
                                                                                                       onClick={this.save}>enable</a><a
                href="#" onClick={this.remove}>remove</a>
            </li>
        )
    }
});
//每一行 叫做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 </a><a
                className="right" href="#" onClick={this.remove}>remove</a></li>
        )
    }
});
//组件划分（整体称为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(<Item onRemove={this.remoteItem} onEdit={this.edit} key={entity[0]} id={entity[0]}
                               value={entity[1]}/>)
        }

        for (let entity of this.state.editList) {
            editListDOM.push(<ItemEditor onSave={this.save} onRemove={this.remoteItemEditor} key={entity[0]}
                                         id={entity[0]}
                                         value={entity[1]}/>)
        }

        return (
            <div>
                <button onClick={this.add} className="btn btn-default">Add</button>
                <ul className="list-group">
                    {/*//此处添加子元素，（可编辑的与不可编辑的）*/}
                    {/*<Item value={132}/>
                    <ItemEditor value='请输入'/>*/}
                    {listDOM}
                    {editListDOM}
                </ul>
            </div>
        );
    }
});

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

example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
    <script src="//cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script>
    <script src="//cdn.bootcss.com/babel-core/5.8.24/browser.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="css.css" rel="stylesheet">
</head>
<body>
<div id="example" class="container">

</div>
<script type="text/babel" src="app.js">

</script>
</body>
</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 ?
                <li className="list-group-item">
                    {this.props.id}
                    <input className="item-edit" ref="inputText" defaultValue={this.props.value}/><a href="#"
                                                                                                     onClick={this.save}>enable</a><a
                    href="#" onClick={this.remove}>remove</a>
                </li>
                :
                < li className="list-group-item"> {this.props.value} < a className="right" href="#"
                                                                         onClick={this.edit}> update </a><a
                    className="right" href="#" onClick={this.remove}>remove</a></li>
        )
    }
});
//组件划分（整体称为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(<Item onRemove={this.remoteItem} key={entity[0]} id={entity[0]}
                               value={entity[1]} onSave={this.save}/>)
        }
        return (
            <div>
                <button onClick={this.add} className="btn btn-default">Add</button>
                <ul className="list-group">
                    {listDOM}
                </ul>
            </div>
        );
    }
});

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