React学习一

一、脚手架

创建项目：npx create-react-app 项目名

二、JSX语法

   语法使用注意点：
1、React元素的属性名使用驼峰命名法
2、特殊属性名：class->className、for->htmlFor、tabindex->tabIndex
3、没有子节点的React元素可以用/>结束
4、推荐使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱
  

JS表达式：

  语法：{javascript表达式}
  注意：语法中的是大括号，不是双大括号！

条件渲染：

 可以用if/else或三元运算符或逻辑与运算符来实现

列表渲染：

渲染一组数据使用map方法、添加key属性、并保证key的唯一性

cosnt songs=[{id:1,name:'张三'’},
             {id:2,name:'李四'’},
             {id:3,name:'王文'’}
            ]
cosnt list=(<ul>
{songs.map(item=><li key={item.id}>{item.name}</li>)}
           </ul>
           ) 

样式：

行内样式style
<h1 className="title" style={{color:'red',backgroundColor:'red'}}>jsx样式处理</h1>

三、组件

1. 函数组件：无状态（数据）、只负责数据展示

2. 类组件： render()方法必须要有返回值，表示该组件的结构

3. 事件绑定：

   语法：on+事件名称={事件处理程序}，比如：onClick={()=>{}} 注意：React事件采用驼峰命名法，比如onMouseEnter、onFocus

四、state、setState

export default class index extends React.Component {
  constructor() {
    super()
    //初始化state
    //this.state = {
    //  count: 0
    //}
  }
  //简化语法初始state(推荐)
  state = {
    count: 0
  }
  render() {
    return (
      <div>
        <button onClick={()=>{
        this.setState({count:this.state.count+1})
        }}>+1</button>
      </div>
    )
  }
}