react 基础篇
react 初学
2018/10/27/ 10:18:59
react 基础常识
- jsx 语法及使用规范
- jsx 是被使用在模板中的,也就是 return( jsx 写在这里 )
- 变量这样写
{value}
, 执行js基础操作这样写{ 1 + 1 }
, 还可传入数组,jsx会自动展开数组render(){ var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>] return( <div>{arr}</div> ) }
- 书写内联样式时
- 注意事项1: css 与变量不同,需要变成
{{}}
{{这里写 css}}
- 注意事项2
- 像
text-align
background-color
这样的css名称需要变化为textAlign
和backgroundColor
- 使用驼峰命名
camelCase
var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>] return( <div style={{textAlign:"center"}}>{arr}</div> )
- 像
- 注意事项3
{{color: "red"}} css名称不需要加引号 {{fontSize: 20}} 表示 大小的样式 不加 px时不需要加引号, {{width: "20px"}} 如果加了px就需要加上引号
- 代码示例
let c = {backgroundColor:"green", textAlign:"center"}; let arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>] return( <div style={c}> {arr} <span style={{fontSize: 10}}></span> </div> )
- 使用外联样式,需要先引入css文件,后使用 className标识
import "./index.css" ... <span className="btn-1">
- 注意事项1: css 与变量不同,需要变成
react 常见的报错
-
函数需要使用 驼峰命名法
CamelCase
-
自定义的类首字母应该大写,因为这样才能区分该组件是自定义还是html标签
-
在一个函数或类,return 的html 应该是一个整体,否则会报错
- 错误代码
return( <div>我是张啥子</div> <p>这样写是错误的</p> )
- 报错信息
- 正确代码
return( <div> <div>我是张啥子</div> <p>这样写是错误的</p> </div> )
- 错误代码
-
通过 style 添加内联样式的时候,容易犯的错误。
- 错误:
ReactDOM.render( <h1 style = {fontSize:12}>菜鸟教程</h1>, document.getElementById('example') );
- 正确:
ReactDOM.render( <h1 style = {{fontSize:12}}>菜鸟教程</h1>, document.getElementById('example') );
- 错误: