React基础语法的学习---2.JSX和项目配置文件分析

什么是JSX？

//React创建元素方法
const element = React.CreateElement('div',{classNmae:'div'},'hello world')

//使用JSX创建
const element = <div className = 'div'> hello world </div>

通过比较我们可以发现，用 用第二种方法创建更为直观和简洁。

 但是用第二种方法创建这个有趣的标签，它既不是字符串，也不是HTML

 它被称之为JSX，是JS的一个语法拓展，建议在React中配合JSX，JSX其实是一个语法糖，可以   很好的描述UI应该呈现出它应有交互的本质形式。JSX可能会使人联想到模板语言，但是他具有JS的全部功能，在React开发中，会经常使用一种特殊语法来描述React组件，它叫做JSX，JSX可以生成React"元素"

JSX它表示的是对象

Babel会把JSX转译为React.CreateElement（）函数调用，所以说JSX相当于是React.CreateElement的语法糖,是它的简化写法

jsx语法规则：

定义虚拟DOM时，不要写引号
标签中混入JS表达式时要用{ }
样式的类名指定要用className，而不是用class
内联样式，要用style={{key: value}}的形式去写
只有一个根标签
标签必须闭合
标签首字母
（1）若小写字母开头，则将标签转为html中同名元素，若html中无对应的标签，则报错
（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
 

项目文件配置分析

node_modules  包文件夹

public 公共资源

assets 公共资源

/**********************************************/

1.相同点
文件夹中的资源在html中使用都是可以的

2.不同点
使用assets下面的资源在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。
使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件

/**********************************************/

src 源文件

  --component 公共组件

  --page    页面 

     ---index 单个页面

         index.js     js

         index.html    html  

         index.less    css

  --router    路由

  --service  接口

  --utils  公用方法

.gitignore  git配置

package.json 项目描述文件

reademe.md 说明文档

yarn.lock  文件备件 --此文件会锁定当前依赖版本，避免意外获得不良依赖和由于开发人员意外更改或者更新版本导致不必要的意外发生。