《React极简教程》第二章 React JSX

简介: React JSXWhy JSX?You don't have to use JSX with React. You can just use plain JS.

React JSX

Why JSX?
You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。

我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="东海陈光剑 光剑博客 Free Ebook 免费电子书 免费epub电子书 电子书大全 电子书下载 光剑免费图书馆 全球免费开放的电子图书馆 東海陳光劍的博客">

    <!--<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>-->
    <link href='../public/css/font.css' rel='stylesheet' type='text/css'>


    <link rel="stylesheet" href="../public/css/style.css" media="screen" type="text/css">
    <link rel="stylesheet" href="../public/css/print.css" media="print" type="text/css">

    <link rel="shortcut icon" href="../favicon.ico">


    <title>陈光剑的个人网站 - Jason Chen's Personal Website</title>

    <!-- jQuery 2.2.3 -->
    <script src="../public/plugins/jQuery/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap 3.3.6 -->
    <script src="../public/bootstrap/js/bootstrap.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../public/bootstrap/css/bootstrap.min.css">

    <!-- BootstrapDialog -->
    <link href="../public/components/bootstrap3-dialog/bootstrap-dialog.min.css" rel="stylesheet" type="text/css"/>
    <script src="../public/components/bootstrap3-dialog/bootstrap-dialog.min.js"></script>


    <!-- React -->
    <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>

    <script type="text/babel" src="../public/js/sidebar.js"></script>
    <script type="text/babel" src="../public/js/header.js"></script>
    <script src="../public/js/jason.js"></script>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?bb529e2f4fa35aeb3b07ca2e09b4ef7c";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</head>

<body>

<div id="header"></div>

<div id="content-wrapper">
    <div class="inner clearfix">
        <section id="main-content">

            <div id="helloWorld2"></div>

            <div style="padding: 2em; text-align: center;font-size: 2em"><a
                    href="http://www.jianshu.com/p/3a9f916d930d" target="_blank">React极简教程:Hello,World</a></div>

            <div id="helloWorld"></div>
            <div id="notUseJSX"></div>

        </section>
        <div id="sidebar"></div>
    </div>
</div>


<script type="text/javascript">
    function sayHelloWorld() {
        BootstrapDialog.show({
            title: 'React Demo',
            message: '使用 JSX ! 现在时间是:' + new Date(),
            type: BootstrapDialog.TYPE_DEFAULT,
            closable: false,
            cssClass: 'dialog_mar',
            buttons: [{
                label: '确认',
                cssClass: 'con_btn',
                action: function (dialogRef) {
                    dialogRef.close();
                    location.reload();
                }
            }, {
                label: '取消',
                action: function (dialogRef) {
                    dialogRef.close();
                }
            }]
        });

    }
</script>

<!--使用 JSX 例子-->
<script type="text/babel">
    var HelloWorld = React.createClass({
        getInitialState: function () {
            return {};
        },
        sayHello: function () {
            sayHelloWorld();
        },
        render: function () {

            var helloWorldStyle = {
                textAlign: 'center',
                padding: '4em'
            };

            var btnStyle = {
                padding: '1.5em',
                fontSize: '1.5em'
            };

            return (
                    <div style={helloWorldStyle}>
                        <button onClick={this.sayHello} style={btnStyle}>使用 JSX !</button>
                    </div>
            );
        }
    });

    ReactDOM.render(<HelloWorld/>, document.getElementById('helloWorld'));

    //    var helloWorld2=ReactDOM.render(<h1>Hello,World!</h1>, document.getElementById("helloWorld2"));

    var HelloWorld2 = React.createClass({
        render: function () {
            var helloWorld2Style = {
                textAlign: 'center'
            };

            return (<h1 style={helloWorld2Style}>React JSX</h1>);
        }
    });

    ReactDOM.render(<HelloWorld2/>, document.getElementById("helloWorld2"));

    ReactDOM.render(
        React.createElement('h1', null ,'没使用 JSX !'),
        document.getElementById('notUseJSX')
    );

</script>



</body>
</html>

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

创建并返回一个新的指定类型的 ReactElement。type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是 ReactClass (通过 React.createClass 创建的)。

React JSX将类似XML的语法转化到原生的JavaScript,元素的标签、属性和子元素都会被当作参数传给React.createElement方法.

代码实例

#JSX
var Nav;
var app = <Nav color="blue" />;
 
#native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});


//使用JSX
React.render(
    <label className="xxx" htmlFor="input">content</label>,
    document.getElementById('example')
);
 
//不使用JSX
React.render(
    React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
    document.getElementById('example')
);


有对应的 JSX --JS 转化器。

一切皆是映射。(光剑)

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX,但它有以下优点:

JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的,在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

使用 JSX
JSX 看起来类似 HTML ,我们可以看下实例:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。
React 实例

ReactDOM.render( 
<div> 
<h1>菜鸟教程</h1> 
<h2>欢迎学习 React</h2> 
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p> 
</div> , document.getElementById('example'));

尝试一下 »

独立文件

你的 React JSX 代码可以放在一个独立文件上,例如我们创建一个 helloworld_react.js
文件,代码如下:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

然后在 HTML 文件中引入该 JS 文件:
React 实例

<body> <div id="example"></div><script type="text/babel" src="helloworld_react.js"></script></body>

尝试一下 »

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下:
React 实例

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));

尝试一下 »
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值,则会输出 false.
React 实例

ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));

尝试一下 »

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式:
React 实例

var myStyle = { fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1 style = {myStyle}>菜鸟教程</h1>, document.getElementById('example'));

尝试一下 »
注释
注释需要写在花括号中,实例如下:
React 实例

ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById('example'));

尝试一下 »

数组

JSX 允许在模板中插入数组,数组会自动展开所有成员:
React 实例

var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术,更是梦想!</h2>,];

ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));

尝试一下 »

HTML 标签 vs. React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。

var myDivElement = <div className="foo"/>;

ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;

ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

注意:

由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className和 htmlFor
来做对应的属性。

html属性 jsx关键字
class className
for htmlFor
相关文章
|
1月前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
36 0
|
1月前
|
XML 前端开发 JavaScript
react中JSX的详解
react中JSX的详解
22 2
|
1月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
65 0
|
1月前
|
前端开发 JavaScript 安全
React中的JSX:语法与原理深入解析
【4月更文挑战第25天】本文深入解析React中的JSX,一种JavaScript语法扩展,使代码更直观。JSX让开发者以HTML样式描述组件UI,但最终编译成JavaScript。通过Babel转换,JSX标签转为React.createElement()调用,创建虚拟DOM。JSX的优势在于直观性、类型安全、代码复用和工具支持,助力高效开发React组件,适应不断发展的Web应用需求。
|
1月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
|
1月前
|
前端开发 JavaScript 安全
react为什么要使用JSX
react为什么要使用JSX
39 1
|
1月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
24 0
|
1月前
|
JSON 前端开发 JavaScript
React源码解析-JSX
React源码解析-JSX
70 1
|
1月前
|
XML JavaScript 前端开发
说说React jsx转换成真实DOM的过程?
说说React jsx转换成真实DOM的过程
25 0
|
1月前
|
前端开发 JavaScript API
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
44 0

热门文章

最新文章