小鸡啄米之React语法

JSX语法

这是一种奇怪的语法：由变量和标签组合成，即标签和普通语法混合使用const element = <h1>Hello, world!</h1>;

为了避免本身的JS语法中的class和for关键字与标签中属性名重复，react使用className和htmlFor

如果要使用jsx语法，需要安装：babel-preset-react包转换，然后在.babelrc文件中的preset下增加react {"presets":["react"]}

这种语法其实是通过：React.createElement()来实现的，如果其中需要写js语法，需要再大括号中写：{js语法}，如：

import React from 'react'
export default function App(props){
    return(
        <div>
            {props.msg}
        </div>
    )
}

注意：jsx语法中的js语法中判断和循环只能使用：三元运算符和map遍历，组件return只能返回单个标签，可嵌套，不能并列

html中引入jsx

类似于引入js，也在<script>标签中引入：<script type="text/babel" src="helloworld_react.js"></script>

jsx样式使用

可以提取出来使用，也可以写成行内样式，推荐使用行内样式，也可以写在同名样式文件中

var myStyle = {
   fontSize: 100,
   color: '#FF0000'
};
ReactDOM.render(<h1 style = {myStyle}>abc</h1>,document.getElementById('example')
);

如果写在行内则需要包装为对象如：style={{width:'80%',height:'30px'}}

jsx使用注释

注释格式：{/*注释...*/}

jsx使用数组

需要写在{}中，且默认展开所有选项

如果需要遍历每一项可以使用map，如：

{arr.map((item,index)=>{
// item子项   index下标
// react里一般使用map遍历，通过return返回渲染代码块
// map可用于返回符合条件的内容结合if语句
// map不结合if判断语句则可以遍历数组，返回全部数组的内容
return(
        <li key={item.id}>
            {item.name}--{item.age}    
        </li>
    )
})}