react-jsx语法

JSX语法

    如要要使用 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/ }
    ]
  }
    JSX语法的本质:还是以 React.createElement 的形式来实现的,并没有直接把 用户写的 HTML代码,渲染到页面上; 如果要在 JSX 语法内部,书写 JS 代码了,那么,所有的JS代码,必须写到 {} 内部; 当 编译引擎,在编译JSX代码的时候,如果遇到了<那么就把它当作 HTML代码去编译,如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译; 在{}内部,可以写任何符合JS规范的代码; 在JSX中,如果要为元素添加class属性了,那么,必须写成className,因为 class在ES6中是一个关键字;和class类似,label标签的 for 属性需要替换为 htmlFor. 在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹; 如果要写注释了,注释必须放到 {} 内部
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 = <p className="myp" key={i}>但是,你知道它的本质吗???</p>
  arr.push(p)
}
var mydiv = <div>
  这是使用 jsx 语法创建的div元素
  <h1 title={mytitle + 'aaaaa'}>哈哈哈,JSX真好用啊</h1>
  <p className="myp">但是,你知道它的本质吗???</p>
  <label htmlFor=""></label>

  {arr}

  /* 这是多行注释,你肯定看不到我 */
  { 
    // zheshi zhushi 
  }

  { /* 这是注释 */ }
  {/* 1234 */}
/* 注释也必须用{}括起来*/
</div>


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(<div>
  {/* <Hello name={person.name} age={person.age} gender={person.gender} address={person.address}></Hello> */}

  <Hello {...person}></Hello>
</div>, document.getElementById('app'))

// 注意:这里 ...Obj  语法,是 ES6中的属性扩散, 表示,把这个对象上的所有属性,展开了,放到这个位置
栏目
文章分类
728_90 cn stocks