打开my-first-react-app文件夹

编辑器：sublime_text

JSX语法

①直接声明：

//可直接在变量名赋值html代码

const element = <h1>Hello, world!</h1>;

②使用表达式声明：

//定义一个函数myMsg

function myMsg(user){

    return '我叫' + user.name +  '，我今年' + user.age + '岁';

}

//定义变量user

const user = {

    name: 'LJ',

    age: 20

}

//定义变量element ,并执行myMsg函数传参user

 const element = (

    <h1>

            大家好，｛myMsg(user)｝!

    </h1>

)

执行React渲染代码

//注意 const 不能定义两次相同的变量名

ReactDOM.render(

    element,

    document.getElementById('root')

)

代码：

效果：

③ JSX 属性

//使用引号来定义以字符串为值的属性

const element = <div tabIndex = '0'></div>;

const element01 = (

    <h1 className="myClassName">

        Hello, React

    </h1>

)

//也可以使用大括号来定义以Javasctipt表达式为值的属性：

const element = <img src={user.imgUrl} />;

注意！

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

例如，class 变成了 className，而 tabindex 则对应着 tabIndex。

参考网址：

JSX简介 - React