摘要

react 学习包括几个部分：

  • 文本渲染
  • JSX 语法
  • 组件化思想
  • 数据流

JSX 语法

1. 定义

JSX 是javascript + xml 的合集，我们可以将javascript 与 html 一起编写， 封装页面组件的html 格式与业务逻辑。但使用 JSX 时，一定要编写成能精确定义和反应组件及属性的树状结构，避免无法解析，虽然目前还没遇到过无法解析的情形。

2. 如何区分javascript 与 xml

JSX 代码中 以 {} 包含的为 javascript 代码， <> 包含的为 html 代码，解析时采用对应的语法解析器

3. React 模块

约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。

  1. html 标签，JSX 中以小写字母开头
  2. react 组件，JSX 中以大写字母开头
<body>

    <div id="HelloWorld"></div>

    <div id="HelloWorld1"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var hw = <div>hello,world</div>;

    var HelloWorld = React.createClass({

        clickHandler: function() {

            console.log(this.props);

            console.log('yes, click event has been fired!');

        },

        render: function() {

            return (

                <p onClick={this.clickHandler}>

                    你好，{this.props.name}, 欢迎大驾光临！

                </p>

            );

        }

    });

    React.render(

        <HelloWorld name={'huxiaoyun'} />,

        document.getElementById('HelloWorld')

    );

    React.render(

        hw,

        document.getElementById('HelloWorld1')

    );

</script>

4. html 属性

自定义属性采用data 开头， 比如 data-index 表示此dom 节点的序列号

5. 注意点

  • 前面的代码都用了JSXTransformer.js，发布时一定要提前编译为javascript，可安装 react-tools 进行转化，自动化工具也可使用gulp 对应的插件gulp-react

  • JSX 其实是一种语法糖，它将JSX 代码翻译成javascript，某些情况无法实现，如下面

<body>

    <div id="HelloWorld"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var a = true;

    // 不正确写法，暂不知道原因

    // var helloWorld = <div id=if (a) { 'success'} else { 'fail'}>hehehe</div>;

    // var helloWorld = <div>{if (a) <div id='success'>Hello World!</div> else <div>Hello World!</div>}</div>;

    // 正确写法

    var helloWorld = <div>{a ? <div id='success'>Hello World!</div> : <div>Hello World!</div>}</div>;

    React.render(

        helloWorld,

        document.getElementById('HelloWorld')

    );

</script>

  • 不支持某些html 属性，如 class for , JSX 中替换为 className htmlFor

  • JSX 大小写敏感

    比如 onClick 如果写成 onclick 是无法触发事件的

<body>

    <div id="HelloWorld"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var HelloWorld = React.createClass({

        clickHandler: function() {

            console.log(this.props);

            console.log('yes, click event has been fired!');

        },

        render: function() {

            return (

                <p onClick={this.clickHandler}>

                    你好，{this.props.name}, 欢迎大驾光临！

                </p>

            );

        }

    });

    React.render(

        <HelloWorld name={'huxiaoyun'} />,

        document.getElementById('HelloWorld')

    );

</script>
  • 行内样式时不能采用引号的书写方式，正确方式如下
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>行内样式</title>

    <style type="text/css">

        .big {

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div id="HelloWorld"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var HelloWorld = React.createClass({

        render: function() {

            return (

                <p style={{color:'red'}} className="big">

                    你好，{this.props.name}, 欢迎大驾光临！

                </p>

            );

        }

    });

    React.render(

        <HelloWorld name={'huxiaoyun'} />,

        document.getElementById('HelloWorld')

    );

</script>
  • html 格式文本展示，举个例子：
<body>

    <div id="HelloWorld"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var HelloWorld = React.createClass({

        render: function() {

            return (

                <p>

                    你好，{this.props.name}, 欢迎大驾光临！

                </p>

            );

        }

    });

    // 转义

    // var content = <div>huxiaoyun</div>;

    // 不转义，作字符串输出

    var content = '<div>huxiaoyun</div>';

    React.render(

        <HelloWorld name={content} />,

        document.getElementById('HelloWorld')

    );

</script>

【JAVASCRIPT】React学习-JSX 语法的更多相关文章

  1. 前端笔记之React（一）初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  2. React的JSX语法及组件

    最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...

  3. react 的JSX语法需要注意哪些点？

    注释方式 ReactDOM.render( <div> {/*JSX 中的注释方式*/} </div>, document.getElementById('root') ) j ...

  4. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  5. React之jsx语法特性

    jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...

  6. 3.react 基础 - JSX 语法

    1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = < ...

  7. react的jsx语法

    在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...

  8. React的jsx语法，详细介绍和使用方法！

    jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...

  9. React使用JSX语法

    目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法  <--返回目录 JSX语法:符合xml规范的js语法 JS ...

随机推荐

  1. [bzoj4872]分手是祝愿

    Description Zeit und Raum trennen dich und mich. 时空将你我分开.B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态 ...

  2. Babel 入门指南

    Babel 入门指南 ​⚠️ 注意: Babel 可以与很多构建工具(如 Browserify.Grunt.Gulp 等)进行集成.由于本教程选择 Webpack ,所以只讲解与 Webpack 的集 ...

  3. XAML: 获取元素的位置

    在之前讨论 ListView 滚动相关需求的文章中(UWP: ListView 中与滚动有关的两个需求的实现)曾经提到了获取元素相对位置的方法,即某元素相对另一元素的位置.现将所有相关方法再作整理,并 ...

  4. Vulkan Tutorial 21 Staging buffer

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 顶点缓冲区现在已经可以正常工作,但相比于显卡内部读取数据, ...

  5. CoolBlog开发笔记第1课:项目分析

    首先说一下CoolBlog开发笔记是我制作的<Django实战项目>系列教程基础篇的内容,使用Django来开发一个酷炫的个人博客,涉及的知识包括项目的分析,环境的搭建,模型和视图定义等等 ...

  6. 解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题

    一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下.之前一直觉得用inpu ...

  7. 流畅的python学习笔记：第五章

    在python中一切都可以视作为对象,包括函数.我们来看个例子: def function_try():     '''it is funciton try doc'''     print 'fun ...

  8. Python的多线程编程

    提到多线程,很多人就会望而却步,本文将由浅入深地带你攻克python多线程编程,并防止你跳入深坑, 首先看一段简单的代码: from time import ctime,sleep def play_ ...

  9. Swift计算字符数量

    通过调用全局 countElements 函数并将字符串作为参数进行传递可以获取该字符串的字符数量. let unusualMenagerie = "Koala

  10. 用超链接a来提交form表单

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...