props、state、forms

{} Is used to embed any JS expression 
JSX properties 
JS core divided into three blocks: ES6, the DOM, the Window 
the BABEL compiler: html syntax can be compiled online react ** syntax to generate a corresponding 
custom components first letter: for the difference between ordinary objects 
HTML is compiled into what? 
   It is a syntactic sugar --React.createElement () 
   is the object TeactElment 

Props (attributes) 
   component functions like accepting a specific input (The props), outputs a specific output (React elements) 
   Function Format: V = f ( props) 

case:] [card mounted on Bootstrap 
   NPM the install on Bootstrap --save 
directly referenced in the inlet JS file: import 'bootstrap / dist / css / bootstrap.min.css' 
solid column:

import React from 'react' 
define the components that use JS // function 
const NameCare = (props) => { first 
    const {name, Number, isHuman, Tags The props =} 
    return ( 
        <className = div "Alert-Alert Success "> 
            <className = H4" Alert-heading "> {name} </ H4> 
            <UL> 
                <Li> phone: Number {} </ Li> 
                <Li> {isHuman 'human':? 'alien'} </ Li> 
                <HR /> 
                <P> 
                    {tags.map ((Tag, index) => ( 
                        <className = span "badge badge-badge-Primary Pill" 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'// assembly incorporated in the page

const tags = [ 'dinosaurs', 'Soccer Boy'] // definition array 
display value

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

state 

real columns: thumbs up

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