美文网首页
React.js 入门学习笔记

React.js 入门学习笔记

作者: QuinnR | 来源:发表于2017-06-19 12:45 被阅读0次

    React.js 知识点总结:

    之前已大量使用过 Vue.js 所以对于学习 React.js 有所帮助,看起来还是 Vue.js 好学一些。
    测试在浏览器环境使用,文件引入:

    -- react.js     核心文件
    -- react-dom.js DOM操作相关
    -- babel.js     JSX 转换成 js, 只是在测试的时候使用,实际生产环境需要在服务器端转换完成再使用
    

    JSX 文件

    jsx 文件可以写在 script 里面,但是要注意 type = text/babel, 不可以直接作为 javascript 使用。

    组件

    创建组件

    
    var MyCom = React.createClass({
        // 设置 props 默认值
        getDefaultProps() {
            return {
                title: 'Default Title'
            }
        },
        // 设置 state 默认值
        getInitialState() {
            return {
                count: 5,
                maxNum: 10
            }
        },
        // btn 事件
        addCount() {
            if(this.state.count >= this.state.maxNum){
                return false
            }
            this.setState({
                count: this.state.count+1
            })
        },
        // 渲染结构
        render() {
            return (
                <div ref="rootbox">
                    <h3>{this.props.title}</h3>
                    <div>{this.state.count}</div>
                    <button onClick="addCount">click</button>
                </div>
            )
        }
    })
    

    使用组件

    ReactDOM.render(
        <MyCom title="this is a title" />,
        document.getElementById('app')
    )
    

    相关文章

      网友评论

          本文标题:React.js 入门学习笔记

          本文链接:https://www.haomeiwen.com/subject/smegqxtx.html