写jsx_教程3—— react 中 jsx 原理

1、jsx 是什么

 //这个有趣的标签语法既不是字符串也不是 HTML

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

它被称为 JSX，是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX 可以生成 React “元素”。我们将在下一节中探讨如何将这些元素渲染为 DOM。

2、jsx 原理

这里他讲解的东西我们一般编程不会这么写，就截图让大家看看，做一个了解什么是jsx 原理

const appDom={} //表示一个虚拟的DOM树的方式

class App extends Component{ render(){ return( <div><h1> jsx 原理 </h1> <p>类组件是继承React.Component的</p> </div> ) }} //这里是类组件，但却是不合法的 js 代码

下面没有截到的代码：

render(
    <App />, 
    document.getElementById('root')
)

完整的代码就有了，如果你想打出来试一下，也是可以的。

over