props、state、forms


{}用来内嵌任何JS表达式
JSX属性
JS核心分为三大块：Es6、DOM、Window
BABEL编译器：可以在线编译html语法生成对应的react语法   **
自定义组件第一个字母大写：用于区别普通的对象
HTML被编译成了什么？
   它是一种语法糖--React.createElement()
   是TeactElment对象

Props(属性)
   组件就像函数一样，接受特定的输入（props）,产出特定的输出（React elements）
   函数格式：V=f(props)

案例：【名片】安装 bootstrap
   npm install bootstrap --save
在入口JS文件中直接引用  ：import 'bootstrap/dist/css/bootstrap.min.css'
实列：

import React from 'react'
//使用JS函数的方式定义组件
const  NameCare=(props)=>{ 第一种
    const {name,number,isHuman,tags}=props
    return (
        <div className="alert alert-success">
            <h4 className="alert-heading">{name}</h4>
            <ul>
                <li>电话：{number}</li>
                <li>{isHuman?'人类':'外星生物'}</li>
                <hr/>
                <p>
                    {tags.map((tag,index)=>(
                        <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                    ))}
                </p>
            </ul>
        </div>
    )
}
/*class NameCare extends  React.Component{第二种写法
    render() {
        //定义值
        const {name,number,isHuman,tags}=this.props
        return (
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>电话：{number}</li>
                    <li>{isHuman?'人类':'外星生物'}</li>
                    <hr/>
                    <p>
                        {tags.map((tag,index)=>(
                                <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                            ))}
                    </p>


                </ul>


            </div>
        )
    }
}*/
export default NameCare

import NameCare from './Care/NameCare'//在页面中引入组件

const tags=['恐龙','足球小子']//定义数组
显示值

<NameCare
  name={'Viking'}
  number={123456789011}
  isHuman
  tags={tags}
/>


state

实列:点赞

import React from "react";

class LikesButton extends  React.Component{
        constructor(props){
                super(props);
                this.state={
                    likes:0
                }
        }
increaseLikes(){
            this.setState({
                likes:++this.state.likes
            })
}
 render() {
            return (
                <div className="">
                    <button type="button"
                            className=""
                     onClick={()=>{this.increaseLikes()}}
                    >
                        {this.state.likes}
                    </button>
                </div>
            )
 }
}
export  default  LikesButton

猜你喜欢