[Java教程]Reactjs 入门基础(一)

0 -06-02 17:00:04

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 browser.min.js：

1，react.min.js -React 的 核心库

2，react-dome.min.js - 提供与DOM 相关的功能。

3，browser.min.js 用于将JSX 语法转化为JavaScript 语法。

ReactDOM.render(

Hello, world!

document.getElementById('example')

);

注意：如果我们需要使用 JSX，则

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

JSX 是一个看起来很像 我们不需要一定使用 JSX，但它有以下优点：

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

它是类型安全的，在编译过程中就能发现错误。

使用 JSX 编写模板更加简单快速。

使用 JSX

JSX 看起来类似 HTML ，我们可以看下实例:

ReactDOM.render(

Hello, world!

document.getElementById('example')

);

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，

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

ReactDOM.render(

柠檬先生

欢迎学习 React

这是一个很不错的 JavaScript 库!

,

document.getElementById('example')

);

独立文件

你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：

ReactDOM.render(

Hello, world!

document.getElementById('example')

);

然后在 HTML 文件中引入该 JS 文件：