精华内容
下载资源
问答
  • 什么是jsx

    2019-07-28 09:54:36
    1、jsx是什么? React 使用 JSX 来替代常规的 JavaScript JSX 一个看起来很像 XML 的 JavaScript 语法扩展 我们不需要一定使用 JSX,但它有以下优点 JSX 执行更快,因为它在编译为 JavaScript 代码后进行了...

    JSX

    1、jsx是什么?

    • React 使用 JSX 来替代常规的 JavaScript
    • JSX 是一个看起来很像 XML 的 JavaScript 语法扩展
    • 我们不需要一定使用 JSX,但它有以下优点
    1. JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化

    2. 它是类型安全的,在编译过程中就能发现错误

    3. 使用 JSX 编写模板更加简单快速

    展开全文
  • 什么是JSX

    2020-10-16 09:40:12
    由React团队开发的 ...虽然你可以完全不使用JSX语法,只使用JS语法,但还是推荐使用JSX,可以定义包含属性的树状结构的语法,类似HTML标签那样的使用,而且更便于代码的阅读。 一个简单的例子: <!DOCTYPE html

    是由React团队开发的 是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。
    虽然你可以完全不使用JSX语法,只使用JS语法,但还是推荐使用JSX,可以定义包含属性的树状结构的语法,类似HTML标签那样的使用,而且更便于代码的阅读。

    一个简单的例子:

      <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8" />
          <title>Hello React!</title>
          <script src="vendor-js/react.js"></script>
          <script src="vendor-js/react-dom.js"></script>
          <script src="vendor-js/babel-core/browser.min.js"></script>
        </head>
        <body>
          <div id="example"></div>
          <script type="text/babel">
            ReactDOM.render(
              <h1>Hello, world!</h1>,
              document.getElementById('example')
            );
          </script>
        </body>
      </html>
    

    当其中

    Hello,world

    就是使用到了jsx语法。HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。如果转化成纯JavaScript 的话,就是:

        <script type="text/javascript">
          ReactDOM.render(
            React.DOM.h1(null,'hello,world!'),
            document.getElementById('example')
          );
        </script>
    

    有两个要注意的地方:

    展开全文
  • 什么是 JSX

    2017-05-24 16:41:00
    JSX 即 JavaScript XML——一种在 React 组件内部构建标签的类 xml 语法。... 举个例子,在不使用 jsx 的 React 程序中创建一个标题的函数调用大概这样:  //v0.11  React.Dom.h1({className:'...

      JSX 即 JavaScript XML——一种在 React 组件内部构建标签的类 xml 语法。React 在不使用 JSX 的情况下一样可以工作,然而使用 JSX 可以提高组件的可读性,因此推荐你使用 jsx。

      举个例子,在不使用 jsx 的 React 程序中创建一个标题的函数调用大概是这样:

        //v0.11

        React.Dom.h1({className:'question'},'Questions');

        //v0.12

        React.createElement('h1',{className:'question'},'Question');

      如果使用了JSX,上述调用就变成了下面这种更熟悉且简练的标签;

        <h1 className="question">Question</h1>

      与以往在 JavaScript 中嵌入 HTML 标签的几种方式相比,jsx 有如下几点明显的特征;

        1.jsx 是一种句法变换——每一个 JSX 节点都对应着一个 JavaScript 函数;

        2.JSX 既不提供也不需要运行时库;

        3.JSX 并没有改变或添加 JavaScript 的语义——他只是简单的函数调用而已。

      与 HTML 相似之处赋予了 JSX 在 React 中的强大的表现力。

     

    转载于:https://www.cnblogs.com/clearyang/p/6899713.html

    展开全文
  • 什么是JSX?在React中使用JSX

    千次阅读 2018-04-27 15:07:25
    (纯手打,如有错误的地方在下方评论,3Q)什么是JSXJSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作...

    (纯手打,如有错误的地方在下方评论,3Q)

    什么是JSX

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

    举个栗子,在不适用JSX的React程序中创建一个标题的函数调用大概是这个样子:


    使用JSX的好处

    1.更加熟悉

    许多团队都包括了非开发人员,例如熟悉HTML的UI及UX设计师和负责完整测试产品的质量保证人员。使用JSX之后,这些团队成员都可以更轻松地阅读和贡献代码。任何熟悉XML语言的人都能轻松地掌握JSX.

    2.更加语义化

    除了更加熟悉外,JSX还能够讲JavaScript代码转换为更加语义化、更加有意义的标签。

    <div className="divider">
    <h2>Question</h2>
    </div>

    变成

    <Divider>Question</Divider>

    3.更加直观

    对比使用JS和JSX

    //使用JS
    render:function (){
    return React.createElement('div', {className: "divider"},
    "Label Text",
    React.createElement('hr')
    );
    }
    //使用JSX
    render:function (){
    return <div className="divider">
    Labbel Text<hr/>
    </div>
    }
    很多人都认为JSX版本更加易懂,也更容易调试。

    4.抽象化

    上面的js写法可能会因为React的版本不同而不同。但是JSX提供的抽象能力却能够在升级的时候无痛修改。不需要修改任何代码

    5.关注点分离

    最后,也是React的核心。有HTML和JS代码在一起组成一个独立的组件,并把所有的逻辑和标签封装在其中。所以你只需要关注每一个独立的组件。JSX以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树,同时还让你的应用程序更加符合逻辑。

    复合组件

    1.定义一个自定义组件

    function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
    }

    const element = <Welcome name="Sara" />;
    ReactDOM.render(
    element,
    document.getElementById('root')
    );

    2.使用动态值

    function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
    }

    const element = <Welcome name="Sara" />;
    ReactDOM.render(
    element,
    document.getElementById('root')
    );

    3.子节点

    组件调用组件:https://reactjs.org/docs/components-and-props.html


    JSX与HTML有何不同

    JSX很像HTML,但却不是HTML语法的完美复制品。实际上JSX规范中这样声明:

    这个规范(JSX)并不尝试去遵循任何XML或HTML规范。JSX是作为一种ECMAScript特性来设计的,至于大家觉得JSX像XML这一事实,那仅仅是因为大家比较熟悉XML。以上内容摘自:http://facebook.github.io/jsx/

    属性

    在HTML中我们用内联的方式给每个节点设置属性,像这样:

    <div id="xxxID" class="xxxClass">...</div>

    JSX以同样的方式设置属性,同时还提供动态js变量设置属性。用花括号包裹js变量甚至回调函数。

    var someId = this.props.id;
    var classes = 'someClass';
    ...
    <div id={someId} className={classes}>...</div>

    条件判断

    在React中,一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起,这意味着你可以轻松地利用JavaScript强大的魔力,比如循环和条件判断。

    在HTML中使用if/else逻辑很难。直接往JSX中加入if语句会渲染出无效的JavaScript:

    <div className={if(isComplete){'xxxxx'}}>...</div>

    上面会报错。。。

    所以我们要使用以下某种办法:

    • 使用三目运算符
    • 设置一个变量并在属性中引用它
    • 将逻辑转到到函数中
    • 使用&&运算符

    非DOM属性

    下面的特殊属性只在JSX中存在

    • key(提升性能的关键)
    • ref(ref允许父组件在render方法之外保持对子组件的一个引用)
    • dangerouslySetInnerHTML(设置原始的HTML)

    事件

    用React元素处理事件,跟Dom元素处理事件非常相似。官网Demo: https://reactjs.org/docs/handling-events.html

    在dom中:

    <a href="#" onclick="console.log('The link was clicked.'); return false">
    Click me
    </a>

    在React中:

    function ActionLink() {
    function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
    }

    return (
    <a href="#" onClick={handleClick}>
    Click me
    </a>
    );
    }

    注释

    JSX本质上就是JavaScript,因此你可以在标签内添加原生的JavaScript注释。注释可以用以下两种形式添加:

    1. 当作一个元素的子节点
    2. 内嵌在元素的属性中

      作为子节点

    <div>
    {/* a comment about this input with multiple lines */}
    <input name="email" placeholder="Email Address"/>
    </div>

      作为内联属性

    <div>
    <input
    /*
    a note about the input
    */
    name="email"
    placeholder="Email Address"/>
    </div>

        也可以单行注释:

    <div>
    <input
    name="email" //a single-line comment
    placeholder="Email Address"/>
    </div>

    特殊属性

    由于JSX会转换为原生的JavaScript函数,因此有一些js关键词我们也是不能使用的(如for何class)

    给表单里面的标签添加for属性需要使用htmlFor:

    <label htmlFor="forText" ...>

    自定义class需要使用className:

    <div className={classText}>


    样式

    内联样式。React把所有的内联样式都规范化为驼峰形式,与JavaScript中的DOM对象的style属性一致

    var styles = {
    borderColor: '#999',
    backgroundColor: '#555'
    };
    ReactDom.render(<h1 style={styles}>Hello WWW</h1>,document.body);

    没有JSX的React

    如果没有JSX。。。以后再写

    1.创建React元素


    2.简写


    JSX官方规范

    2014年9月Facebook发布了一份JSX官方规范,陈述了他们要创造JSX的根本原因,以及一些关于语法上的技术细节。

    你可以在http://facebook.github.io/jsx/上阅读到更多的信息

    在浏览器中实验

    https://reactjs.org/docs/hello-world.html这个地方有个JSFiddle的链接

    https://reactjs.org/jsx-compiler.html这个地方有REPL环境



    本文部分内容摘抄自<React引领未来的用户界面开发框架>

    展开全文
  • 一,什么是JSX语法 有了JSX语法,在写标签时不用加单引号。 原来原生DOM操作是 var root = document.getElementById('root'); root.append('<div>hello world</div>'); 现在JSX操作 render(){ return...
  • 什么是JSX?

    2021-02-23 12:21:43
    jsx是一种基于Ecmascript的一种新特性, 一种定义带属性树结构的语法,树结构就是我们的dom结构,属性就是dom节点中的属性 jsx不是xml或者Html,不是一种限制。 在react中,我们可以使用jsx来编写代码,也可以...
  • 什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度。所以jsx就是在javascript中来编写长得很像xml的语言,这里只是像,在本质上...
  • 一、什么是JSX?JSX 即 JavaScript XML,是一种在 React 组件内部构建标签的类 XML 语法。JSX 并不是一门新的语言,仅仅是个语法糖(syntactic sugar),允许开发者在 JavaScript 中书写 HTML 语法。最后,每个 ...
  • 什么是 JSX?

    万次阅读 2017-12-15 14:13:24
    在互联网上的任何粗略的搜索寻找React材料,毫无疑问,你已经遇到了术语JSX,ES5和ES6。这些难懂的首字母缩略词可能会很快混乱。 ES5(ES 代表ECMAScript)基本上“常规JavaScript”。第5次更新JavaScript,ES5...
  • 什么是JSX语法

    2017-12-26 11:15:11
    简单举个例子来说明: ReactDOM.render( h1>Hello, world!/h1>, document.getElementById('...不加任何引号的语法,就是JSXJSX的基本语法规则就是:遇到 的内容用html解析,遇到 { } 的内容用js解析。
  • 《全栈React》系列包含30多篇文章,带你循序渐进的...阅读全文:【全栈React】第2天:什么是JSX? 欢迎加入“CSDN前端开发者”群,与更多专家、技术同行进行热点、难点技术交流。请扫描以下二维码申请入群。 ...
  • 它被称为 JSX一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSXJSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。...
  • 在react中,我们的页面内容就是通过JSX来编写,那么JSX到底是什么呢?JSX其实就是JavaScript对象,会构建创建一个js对象来描述HTML结构的信息。这里要记住JSX是js的一种扩展语言,类似HTML但是又不是HTML,因为JSX中...
  • 在本文中,我们将介绍React生态系统的一部分:ES6和JSX。 在互联网上的任何粗略的搜索寻找React材料,毫无疑问,你已经遇到了术语JSX,ES5和ES6。这些难懂的首字母缩略词可能会很快混乱。 ES5(ES 代表ECMAScript...
  • JSX,即javscript XML,js内定义的一套XML语法。目前使用babel作为JSX的编译器。这也在前几期中载入babel的原因。 Facebook引入JSX是为了解决前端代码工程复杂、维护困难等问题。JSX为我们提供了一种虚拟DOM的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,154
精华内容 461
关键字:

什么是jsx