JSX简介
JSX就是Javascript和XML结合的一种格式。React发明了JSX,可以方便的利用html来创建DOM,当遇到 < ,JSX就当做HTML解析,遇到 { 就当做javascript进行解析。
组件和普通JSX语法区别
自定义组件必须首字母大写,而JSX是小写字母开头的。
组件外层包裹原则
这是一个很重要的原则,因为React要求必须在一个组件的最外层进行包裹。
错误代码:
所以我们在写一个组件的时候,组件的最外层都需要有一个包裹。
Fragment标签
加上最外层的DIV,组件就完全正常了,但如果布局就偏不需要最外层的标签怎么办?React 为我们提供了Fragment标签。
要想使用,需要先进行引入。
在上面错误代码中,render内,代码的最外层加上Fragment标签即可。
响应式设计和数据绑定
React不建议你直接操作DOM元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注Dom相关的操作,只需要关注数据的操作就可以了。
JSX代码注释
多行注释:
{
/*
正确注释的写法
*/
}
单行注释:
{
//正确注释的写法
}