React第一弹——什么是JSX

React第一弹——什么是JSX

提示：本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！

---

在介绍JSX之前我们先梳理一下怎样在脚手架中使用React

1.在index.js文件中需要先导入react和react-dom两个包，通过es6里的模块化语法进行导入，（因为脚手架是基于webpack的，可以使用es6里的模块化语法进行导入）
2.创建react元素
3.渲染react元素

具体写法如下图所示

这里创建react元素使用的是React.createElement这个方法来实现的，括号里有3个参数，参数的含义如下

第一个参数表示你要创建的元素名称
第二个参数表示元素的属性，如果没有用null表示
第三个参数及其以后的参数表示创建的元素的内部的子节点，包括文本节点，元素节点等所有节点

那么你可能会有疑问，JXS到底是什么呢，和这又有什么关系呢，别着急，让我娓娓道来~

其实JSX就是解决createElement()方法创建元素时的繁琐，不直观，不优雅这个问题的，JSX是js xml简写，表示在js代码中写xml，书写起来更加直观，而且jsx是React的核心内容，他可以更好的体现React声明式的特点，下面我就用createElement()和JSX分别来创建react元素进行对比

//创建react元素
 const title = React.createElement('h1',null,'Hello firstday')
 const title=<h1>hello jsx<span>这是span</span></h1>

第一种是原来的方法，第二种是JSX语法，这样就可以看出来JSX相对于createElement()方法确实简便了不少

有小伙伴会问，为什么在脚手架里可以直接用JSX语法啊，我在单独的HTML页面也用了JSX语法，怎么就不好使呢？

需要注意了，脚手架里之所以能用JSX，是因为JSX不是标准的ECMAScript语法，是ECMAScript的语法拓展，浏览器是不能识别的，所以你建一个html页面，在里面写JSX语法，浏览器当然是解析不了的啦，但是脚手架中已经有了babel，babel进行编译处理，就能在浏览器中正常使用

除此以外，JSX在使用中还有很多注意点：

1.React元素的属性名使用驼峰命名法
如：特殊的属性名class——className ，for——htmlFor，tabindex——tabIndex
2.没有子节点的React元素可以使用/>结束
3.创建的react元素建议用()包裹

举个栗子

import React from 'react'
import ReactDOM from 'react-dom'
const title=(
    <h1 className='title'>
        hello jsx
        <span>这是span</span>
        <span/>
    </h1>
)
// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))