3-初识JSX(一)

认识 JSX

JSX 是一直语法, 能够快速让你描述出一份 DOM 的结构.

它跟 html 很像, 但不是. 我们有过使用 html 的经历, 所以写起 JSX 来也很容易.

不过, JSX 能做的更多.

现在你就可以运行起我们之前使用 create-react-app 新建的项目, 打开 src 下的 index.js :

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  

Hello React!!

, document.getElementById('root') );

你也可以在这里在线调试:

开始了!

在 JSX 里可以使用表达式

jsx 里使用花括号 {} , 在 {} 里可以写 JavaScript 表达式, 比如:

import React from 'react';
import ReactDOM from 'react-dom';

let exp = 'people';

let vol =  good for you!;

ReactDOM.render(
  

Hello React!!

{5+3} {exp}, {vol}
这段代码表现的样子
, document.getElementById('root') );

看看结果, {} 里的东西都变成了表达式的返回值.

image.png

你看到这行代码:

  let vol =  good for you!;

甚至连 JSX 本身也可以被当做表达式.

你还可以发现别的事情, JSX 可以相互嵌套, 可以写属性.

html 真的很像.

总结

现在你可以初步这样记住 JSX:

  • 必须引入react
  • 你可以在里面使用表达式
  • 书写的规则和 html很像

不过我在这里先透露一下后面的内容, 你需要注意以下几点:

  1. 确保每一段独立的 JSX 都有一个最外层的节点包含:

比如: 我们移除最外层的 div,

  

Hello React!!

{5+3} {exp}, {vol}
这段代码表现的样子

你会发现这样就会抛出错误:

image.png

翻译过来是: 相邻的 JSX 元素 必须被一个闭合的标签包含.

  1. 属性需要变成驼峰式, 比如:
  tabindex => tabIndex

  1. 关键字的属性需要换成另外的样子, 比如:

    • class => className
    • for => htmlFor

OK! 现在你初步知道 JSX 是什么了.

你可能感兴趣的:(3-初识JSX(一))