05月01, 2018

React学习之旅 (01) -- jsx及注意事项

jsx专业术语是,一种JavaScript语法扩展,简单理解就是在JS中可以直接书写类HTML标记,类似XML标记。

关于jsx语法需要注意的地方

  1. 多个标记,必须有一个根标记包起来
  2. 可以随意缩进
  3. 单标记必须闭合
  4. jsx语法里面写JS代码,必须用 {}
  5. class, 要写成className
  6. style,要写成JSON对象的形式,如:fontSize: '12px'
  7. 在jsx语法中,事件名必须采用驼峰命名,单词首字母大写,如:onClick

具体写法参考

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>来捡漏 React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <style>
        .tit {
            background: #ccc;
        }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
        function foo()
        {
            alert('我被点击了~');
        }

        var str = '欢迎来捡漏';
        var a = <div>
            <h2 className="tit" >{str}</h2>
            <p style={{fontSize: '20px'}} >这里是描述</p>
            <p onClick={foo} >点击我</p>
        </div>;
        ReactDOM.render(a, document.getElementById('root'));
    </script>
  </body>
</html>

本文链接:http://www.laijianlou.top/post/react-01.html

-- EOF --

Comments