react jsx基础语法使用

jsx是什么？

它不是一种新的语法，而是JavaScript的语法扩展，为函数调用和对象构造提供了语法糖，

特别是 React.createElement()。jsx本质就是Javascript。

 

使用jsx的好处？

1. 编写模版更简洁快速

2. 为声明式，不需要像jquery这种命令式一样，必须先获取到某个元素

3. 执行更快，因为它在编译为 JavaScript 代码后进行了优化

 

使用jsx

下面代码中可嵌套多个 HTML 标签，但外层需要用一个div包裹，被外层div包裹的div元素添加了自定义属性data-ele，

自定义属性需要使用data-前缀。

ReactDOM.render(
    <div>
        <h1>hello word</h1>
        <p>hello react</p>
        <div data-ele='element'>hello jsx</div>
    </div>
    ,
    document.getElementById('app')
);

 

jsx表达式的用法

 在jsx中使用JavaScript表达式, 表达式要写在花括号 {} 中

ReactDOM.render(
    <div>
        <p>{2 + 2}</p>
    </div>
    ,
    document.getElementById('app')
);

 

变量的使用

let name = 'kevin';

ReactDOM.render(
    <div>
        <p>{name}</p>
    </div>
    ,
    document.getElementById('app')
);

 

条件判断的使用

let name = 'kevin';
let flag = true;

ReactDOM.render(
    <div>
        {
            flag ? <p>I am {name}</p> : <p>I am not {name}</p>
        }
    </div>
    ,
    document.getElementById('app')
);

注：jsx中不能使用if else语句，可以使用三目运算代替

 

数组的使用

let name = 'kevin'
let names = ['kevin', 'kin', 'tom'];
ReactDOM.render(
    <div>
        {
            names.map((name, index) => <p key={index}>hello, I am {name}</p>)
        }
    </div>
    ,
    document.getElementById('app')
);

注：在一个数组中，找到唯一一个变量最方便的方法就是使用它的索引

 

react中css样式的使用可以看之前我写的这篇文章

 

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点