【React】入门第二天 - jsx

jsx

---

今天开始学习jsx

什么是jsx

---

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

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

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

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

基本语法

---

jsx相关注释

如果想在jsx中使用注释，无法使用传统的方式

// 注释
/** 注释 */
<!--注释-->

以上的注释无法使用，使用效果如下




如何使用注释

<script type="text/babel">
    let dom =   <h1>
                    {/* 注释 */}
                    React
                </h1>
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

多行标签

当开始使用多行标签的时候必须使用一个父元素将其包裹起来

<!--错误的代码-->
<script type="text/babel">
    let dom =   <div>hello</div><span>world</span>
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

<!--正确的代码-->
<script type="text/babel">
    let dom =（<div>  <div>hello</div><span>world</span></div>）
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

javascript 表达式

变量的使用

如果想在jsx中使用表达式，就需要把表达式放入一对{}中

<script type="text/babel">
    var text = "hello,react!"
    var port = 5500
    let dom =(<div> {text} 
    						<span> {port}</span>
    						<span> {port +1}</span> 
  						</div>)
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

函数的使用

函数的调用也是通过{}去调用

<script type="text/babel">
    var text = "hello,react!"
    var port = 5500

    var user = {
        name: "laoshiren",
        course: "react"
    }

    // 获取对象姓名和课程
    function getString(obj) {
        // return "name:" + obj.name + " -- course:" + obj.course;
    		// ES6的语法 使用的不是" ' 而是 ``
        return `name: ${obj.name} --- course: ${obj.course}`
    }

    let dom =(  <div> {text} 
                    <span> {port}</span>
                    <span> {port +1}</span> 

                    {/*调用函数*/}
                    <div> {getString(user)} </div>
                </div>)
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

js独立文件

新建一个文件夹，里面创建index.html和jsx.js目录结构如图

let user = {
    name : "小明"
}

let dom = (<div> {user.name} </div>)

ReactDOM.render(dom,document.getElementById("reactDemo"))

在index.html引用jsx.js

<script src="./jsx.js" type="text/babel"></script>

属性的使用

比如<a>标签的使用，在属性href中使用{}来确定值

<script type="text/babel">
    var aLinkObject = {
        text : "跳转百度",
        url : "http://www.baidu.com"
    }
    var alink = <a href= {aLinkObject.url}>{aLinkObject.text}</a>

    let dom =(  <div>
                    {alink}
                </div>)
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

假设修改css属，在jsx中不能使用class，因为这是js的关键字，只能用className

<style>
    .alinkClass{
        color: turquoise;
        background-color: teal;
    }
</style>

<script type="text/babel">
    var aLinkObject = {
        text : "跳转百度",
        url : "http://www.baidu.com",
        className : "alinkClass"
    }
    var alink = <a href= {aLinkObject.url} className = {aLinkObject.className} >{aLinkObject.text} </a>

    let dom =(  <div>
                    {alink}
                </div>)
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>