摘要

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. Dubbox中开发REST风格的远程调用

    转载: http://zyg345646335.iteye.com/blog/2208899

  2. PHP:win7 ASP.NET环境与PHP（WAMP）环境如何共存

    经验地址:http://jingyan.baidu.com/article/495ba8410f794d38b30ede89.html 笔记本以前安装过asp.net,启用了Windows的IIS服务 ...

  3. 软件开发项目云端All-In-One体验

    如今在软件开发圈里混,Agile,DevOps,Cloud是大家经常挂在嘴边的词,其实大家各自都有在应用层上的经验,但是如何把三者很好的结合起来,这是所有项目管理者困惑和需要的问题. Agile让我们 ...

  4. MongoDB--数据库管理

    <strong>1.mongod 启动项注释(默认不能生成路径,需手动建立)</strong><br /><span style="white-sp ...

  5. mac+phpstorm增加xdebug调试

    一.版本信息 mac 10.10.5 phpstorm 10.0.3 xdebug   版本需要与phpstorm匹配,匹配地址 点我匹配  点我查看所有版本 提示:不确定xdebug版本的,把php ...

  6. 【Android Developers Training】 25. 保存文件

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  7. accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

    JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...

  8. Web office apps 安装部署

    系统要求为Windows Server 2012, 注意:安装Office Web Apps的服务器除了Office Web Apps之外,不能安装其他应用.包括不能安装Office,lync,,sh ...

  9. JDBC02 利用JDBC连接数据库【使用数据库连接池】

    目录 1/2/3  Statement 和 Preparedstatement 的区别 4 读取properties配置文件 5 数据库连接池 6 利用数据库连接池连接数据库 1 使用Statemen ...

  10. vijos1034题解

    题目: 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如果x,y是亲 ...