Hello World以及jsx语法糖的介绍

创建app/App.js文件，这是一个组件

然后在相同目录下创建main.js文件

引用组件：

二、简单介绍jsx语法糖

jsx不能直接运行 ，是被babel - loader 中的react这个preset翻译的

翻译前：

翻译后：

必须注意：

（1）被一个单独的大标签包裹，比如div或者section

错误的：

正确的：应该被一个div包裹起来，小括号也挺好用的：

return后面为什么要加括号：是因为如果不加的话，jsx语句一换行的话，return后面就会有默认的封号，，所以要加圆括号

（2）标签必须封闭

比如<br>标签后面必须加斜杠，就是<br/>

也就说所有单标签后面都要有斜杠

（3）class要写成className，for要写成htmlFor

return (

<div className="你好">没有什么是正确的</div>

)

（4）HTML注释不能用，只能用JS的注释

JSX中可以使用{}表示临时插入一个js简单表达式，不能是if、for等复杂结构，可以是&&、||短路语法，可以是？三元运算符，可以调用函数。

（5）原生标签比如 p、li、div 如果要使用自定义属性，必须用data -前缀。

错误：

正确的：

如果是自定义标签，可以随意传属性：

（6）JSX表达式用{ }单大括号包裹，在JSX中不能使用if else语句，但可以使用conditional（三元运算）表达式来替代。一下实例中如果变量 i 等于1 浏览器将输出 true，如果修改 i 的值，则会输出 false。

（7）可以运行函数：

自定义函数里面可以加入  一些 if-else if语句

（8）样式使用双大括号

（9）可以使用数组，数组中如果是JSX语法，数组会被自动展开，所以不需要使用ng - repeat这样的指令展开数组

定义一个数组，定义的JSX项目上要求有key属性，只要是重复的数组项目，都要有不能重复的key属性。

心得体会：

感觉通过这位老师的讲解，使我更加明白了JSX的语法，还有react的组件的构成，感觉学习一个新的知识，懂其原理还是挺重要的。