什么是react？什么又是jsx？

一、什么是React？

React是一个用于构建用户界面的JavaScript库，也是Web应用程序的视图层。所有的React应用程序的核心是组件(Component)。组件是一个子包含的模块，它提供一些输出。所以，可以将类似按钮或输入框等元素作为React组件，组件和组件之间可以嵌套组合，组件也可以包含输入一个或多个其他的组件。

如何使用React

React是一个JavaScript库一样，就像我们在HTML中包含一个JavaScript文件一样，并在JavaScript的应用程序中使用React 导出。

二、什么是JSX？

JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。

那么JSX到底是什么呢？JSX其实就是JavaScript对象，会构建创建一个js对象来描述HTML结构的信息。这里要记住JSX是js的一种扩展语言，类似HTML但是又不是HTML，因为JSX中还能进行运算，判断，加入一些js语言等。

JSX中的运算

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

在JSX中是用 {} 来区分是HTML还是js的，也就是说，所有的js语言都得用 {} 括起来

JSX中的变量

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

JSX中的样式

在JSX中,给元素添加样式也是用style属性，但是style里面放的是一个样式对象，如下所示：

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: 'red'}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

通过上述案例，我们可以知道JSX中，样式的属性名称得用驼峰命名

JSX中的HTML标签

在JSX中，有些标签名称为了防止冲突得做一些转换：

class得用className代替

lable元素中的for属性，得用htmlFor代替，如下：

<label htmlFor="msg" ></label>

这里还要注意，JSX中的所有标签必须得是闭标签

更多React相关技术文章，请访问React答疑栏目进行学习！

以上就是什么是react？什么又是jsx？的详细内容，更多请关注0133技术站其它相关文章！