react-jsx语法

JSX语法

  1. 如要要使用 JSX 语法,必须先运行 cnpm i babel-preset-react -D,然后再 .babelrc 中添加 语法配置;

babelrc配置

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

webpack中配置

module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]'] }, // 通过 为 css-loader 添加 modules 参数,启用 CSS 的模块化
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' },
      { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
  1. JSX语法的本质:还是以 React.createElement 的形式来实现的,并没有直接把 用户写的 HTML代码,渲染到页面上;
  2. 如果要在 JSX 语法内部,书写 JS 代码了,那么,所有的JS代码,必须写到 {} 内部;
  3. 当 编译引擎,在编译JSX代码的时候,如果遇到了<那么就把它当作 HTML代码去编译,如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译;
  4. 在{}内部,可以写任何符合JS规范的代码;
  5. 在JSX中,如果要为元素添加class属性了,那么,必须写成className,因为 class在ES6中是一个关键字;和class类似,label标签的 for 属性需要替换为 htmlFor.
  6. 在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
  7. 如果要写注释了,注释必须放到 {} 内部
var myH1 = React.createElement('h1', null, '这是一个大大的H1')
var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1)

由于,React官方,发现,如果直接让用户手写 JS 代码创建元素,用户会疯掉的,然后,用户就开始寻找新的前端框架了,于是,
React 官方,就提出了一套 JSX 语法规范,能够让我们在 JS 文件中,书写类似于 HTML 那样的代码,快速定义虚拟DOM结构;
问题: JSX(符合 XML 规范的 JS 语法)的原理是什么???
注意: 千万要记住,哪怕你在 JS 中可以写 JSX 语法了,但是,JSX内部在运行的时候,也是先把 类似于HTML 这样的标签代码,
转换为了 React.createElement 的形式;
也就是说:哪怕我们写了 JSX 这样的标签,也并不是直接把 我们的 HTML 标签渲染到页面上,而是先转换成 React.createElement 这样的JS代码,再渲染到页面中;(JSX是一个对程序员友好的语法糖)

如果要直接使用 JSX 语法,需要先安装相关的 语法转换工具
运行 cnpm i babel-preset-react -D

var mytitle = '这是使用变量定义的 tilte 值'

var arr = []
for (var i = 0; i < 10; i++) {
  var p = 

但是,你知道它的本质吗???

arr.push(p) } var mydiv =
这是使用 jsx 语法创建的div元素

哈哈哈,JSX真好用啊

但是,你知道它的本质吗???

{arr} /* 这是多行注释,你肯定看不到我 */ { // zheshi zhushi } { /* 这是注释 */ } {/* 1234 */} /* 注释也必须用{}括起来*/
ReactDOM.render(myDiv,document.getElementById('app'))
// var name = 'zs'
// var age = 20
var person = {
  name: 'ls',
  age: 22,
  gender: '男',
  address: '北京'
}

// 注意: ReactDOM.render() 方法的第二个参数,和vue不一样,不接受 "#app" 这样的字符串,而是需要传递一个 原生的 DOM 对象
ReactDOM.render(
{/* */}
, document.getElementById('app')) // 注意:这里 ...Obj 语法,是 ES6中的属性扩散, 表示,把这个对象上的所有属性,展开了,放到这个位置

你可能感兴趣的:(react-jsx语法)