摘要

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. Java8部分新特性的学习

    Java8中的新特性 一.Lambda表达式 Lambda表达式可以理解为一种可传递的匿名函数:它没有名称,但又参数列表.函数主体.返回类型,可能还有一个可以抛出的异常列表. 匿名:和匿名类类似的,它 ...

  2. Python之道1-环境搭建与pycharm的配置django安装及MySQL数据库配置

    近期做那个python的开发,今天就来简单的写一下开发路线的安装及配置, 开发路线 Python3.6.1+Pycharm5.0.6+Django1.11+MySQL5.7.18 1-安装Python ...

  3. java实现发送邮件

    前言:先引入javamail用到的jar包, 自己下载http://fhed.v061.10000net.cn/gulili198509051s/newjspkongjian/ueditor/jsp/ ...

  4. Mac系统占用空间大、空间不够、查看系统文件大小分布

    最近电脑老提示空间不够,甚是心烦,决定研究下,为啥空间这么快就花完了. 如图,256的空间,就剩下几个G了,其中最大头的系统占用:160G,占比60%多,我勒个擦... 正常情况下:我们可以点击管理, ...

  5. ue4玄学画面设置实现

    pc端项目临近发布之时,免不了向玩家提供一些自订选项,以适应各自的习惯和机能,画面设置就是必要的一环. 主要的画面选项有: 1.全屏/窗口化 2.分辨率 3.视野距离 4.抗锯齿 5.后期处理 6.阴 ...

  6. python 解析nginx 日志 url

    >>> import os>>> os.chdir('e:/')>>> log=open('access.log')//这两行是获取日志流> ...

  7. 字符串距离 简单DP

    字符串距离 时间限制: 1 Sec  内存限制: 128 MB 题目描述 设有字符串 X,我们称在 X 的头尾及中间插入任意多个空格后构成的新字符串为 X 的扩展串,如字符串 X 为"abc ...

  8. 后端对数组json_encode,前端遍历输出

    echo json_encode($get_city_lists); <script type="text/javascript"> function get_city ...

  9. bootstrap-datepicker的bug:有日期输入的地方在下个月页面选择当天日期会以当天日期减少一个月显示

    Bug复现详细描述:先选择今日日期,然后点击下个月的某个日期,注意,是直接点击下个月的某个日期,不能通过日期显示tab的下个月箭头进入下个月再来点击某个日期,然后再直接点击本月的今日日期.然后bug会 ...

  10. href 和 src 区别

    去网上百度了一下,感觉还是没有清楚的定义,所以自己稍稍的总结了一下: 1 html标签分为行类元素 和块元素 在加空元素(也可以叫做替换元素img input iframe):当元素为替换元素的时候, ...