React 入门

安装node

由于太过简单此次先省略

安装create-react-app 工具

npm install -g create-react-app   全局安装 react工具

也可以直接引入js文件

    <script  src="./react.development.js"></script>
    <script  src="./react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    //说明 babel.js  作用是将jsx语法转换为 js语法如果没有使用jsx 语法就可以不用引入

react入门之hello world

react 的基本使用分为两步

1. 创建虚拟dom
2. 渲染虚拟dom

    <!-- 省略部分代码-->
    <div id="hello"></div>
    <script type="text/babel">
        var hello = <h1>hello world</h1>; // 创建虚拟dom
        ReactDOM.render(hello,document.getElementById); // 渲染虚拟dom

        // 方法二
        ReactDOM.render(
            <h1>hello world</h1>,
            document.getElementById("hello")
        );
    </script>

react 组件定义

1. 使用类定义 自定义类继承 React.Component
2. 实现render 方法并返回
3. 组件名需大写

    // 函数的方式定义组件 
    function MyComponents(){
        return <h2>自定义组件</h2>;     
    }
    // 类的方式定义组件
    class MyComponent extends React.Component{
        render(){
            return <h2>我是之定义组件</h2>
        }
    }

    // 渲染组件
    ReactDOM.render(<MyComponent/>,document.getEleById("test"));

react 组件属性state、props、refs

state 属性

1. state是一组用于反应组件ui变化的集合
2. state组件可以改变但是必须使用 setState()方法来改变

// 在组件的构造方法中初始化state 属性
constructor(props) { 
             super(props)
             this.state={msg:false}; // state 组件初始化
             this.myClick = this.myClick.bind(this);
         }

props 属性

1. 组件对外接口，父组件可以通过其向子组件传递数据
2. props为只读属性

refs

1. 组件绑定属性，获取组件值

综合练习

    <script type="text/babel">
    // 定义父组件
    class App extends React.Component {

        constructor(props) {
            super(props)
            // 初始化数据
            this.state={data:['李白','李煜','李世民']}
        }
        render() {
            const {data} = this.state;
            return (
                <div>
                    <h3> react 综合练习</h3>
                    <Add addList={(e)=>this.addList(e)} count={data.length}/>
                    <List data={data}/> // 向List 组件中传递数据
                </div>
            )
        }

        addList(list) {
            const {data} = this.state
            data.unshift(list)
            console.log(list);
            this.setState({data:data}) //必须使用 this.setState() 方法更新数据 否则页面不会重新渲染
        }
    }

    // 定义add 组件

    class Add extends React.Component {
        render() {
            return (
                <div>
                    <input type="text" ref={input => this.onName = input} />  
                    <button onClick={e=>this.add()}> add #{this.props.count} </button>
                </div>
            );
        }

        add() {
            let name = this.onName.value;
           this.onName.value = '';

            if (!name) {
              return '';
            }

            this.props.addList(name);
        }
    }

    Add.propTypes ={
        addList:PropTypes.func.isRequired,
        count:PropTypes.number.isRequired
    }

    // 定义list 组件

    class List extends React.Component {
        render() {
           const {data} = this.props
            return(
                <div>
                    <ul>
                        {data.map((v,k)=>{
                            return <li key={k}>{v}</li>
                        })}
                    </ul>
                </div>
            );
        }
    }
    // 组件的类型判断
    List.propTypes ={
        data:PropTypes.array.isRequired
    }
    // 渲染组件
    ReactDOM.render(<App/>,document.getElementById("app"));
</script>

https://www.94zmd.top/html/index.html 点击查看效果