摘要

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. JSON 转换异常 multipartRequestHandler servletWrapper

    下面出现红色的字还有警告,解决方法:本人项目是struts1 from类继承了“extends ActionForm” .把它去掉就行了.如果你是其它的框架一定是继承引起的作个参考吧. ....... ...

  2. H.264格式，iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持

    H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...

  3. Xmanager连接到RedHat Enterprise Linux 6.8

    RedHat Enterprise Linux 6 配置Xmanager ,实现图形界面连接 X是用在大多数UNIX系统中的图形支持系统.如果你在你的Linux机器上使用GNOME或者KDE的话,你就 ...

  4. 关于MATLAB处理大数据坐标文件

    原先有3000条测试数据,MATLAB表现出来强大的数据处理能力,十几秒就可以把数据分类.分装并储存,这次共有10万条坐标数据,MATLAB明显后劲不足,显示内存不足 自我认识:以前MATLAB数据处 ...

  5. oracle学习笔记(1)-三级模式SCHEMA

    oracle三级模式及二级映像 模式(schema)是数据库的一个名词,大部分的数据库在结构上都有三级模式的特征,了解下基本的概念,有助于后续深入的学习. 用老罗坚果pro发布会的话说就是,不罗嗦,先 ...

  6. angular 4使用jquery 第三方插件库

    用jBox插件为例子 1,npm install jBox --save 2,找到.angular-cli.json  增加 "../node_modules/jbox/Source/jBo ...

  7. 再谈AbstractQueuedSynchronizer：基于AbstractQueuedSynchronizer的并发类实现

    公平模式ReentrantLock实现原理 前面的文章研究了AbstractQueuedSynchronizer的独占锁和共享锁,有了前两篇文章的基础,就可以乘胜追击,看一下基于AbstractQue ...

  8. java 中的常用类

    Java 中的包装类 相信各位小伙伴们对基本数据类型都非常熟悉,例如 int.float.double.boolean.char 等. 基本数据类型是不具备对象的特性的,比如基本类型不能调用方法.功能 ...

  9. HDU 1051 Wooden Sticks 贪心||DP

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  10. 用户代理字符串(navigator.userAgent)检测方法

    最近在看<JavaScript 高级程序设计(第三版)>,发现其中关于用户代理字符串检测技术的一些方法,觉得讲的很详细.用户代理字符串(navigator.userAgent)中包含了大量 ...