# 1. 簡單使用
## 1.1 環境
其實和`jQuery`類似，也可以使用`html`的文件引入方式來開發一個簡單的`Demo`。可以查閱文檔：[在網站中添加 React – React (docschina.org)](https://react.docschina.org/docs/add-react-to-a-website.html)
開發環境引入文件：
~~~
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
~~~
因為在`React`中寫的不是原生的`JavaScript`語句，而是`jsx`語句，所以這里需要引入`babel`進行翻譯：
~~~
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
~~~
在使用`React`編寫語句的時候，不再是使用`<script>`標簽的`type="text/javasctipt"`屬性。取而代之的是：`<script>`標簽以及`type="text/babel"`屬性。
## 1.2 使用案例
~~~
<body>
<div id="test"></div>
<script crossorigin src="./js/react.development.js"></script>
<script crossorigin src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
var root = document.getElementById("test")
class MyElement extends React.Component {
render() {
return (
<h1>Hello!</h1>
)
}
}
ReactDOM.render(<MyElement/>, root)
</script>
</body>
~~~
可以在`webstorm`中添加`React`提示，以方便編寫代碼。比如這里安裝`React-Native`提示：
且可以找到對應的`github`的鏈接地址，比如：https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native
同時，可以在瀏覽器安裝一個開發插件`React Developer Tools`，可以用于檢測該網站是否是`React`編寫的，且可以用來檢測組件、狀態數據等。
## 1.3 簡單理解
看下`babel`是如何翻譯的，進入`babel`的官網：https://babel.docschina.org/repl/#：
粘貼：
```
class MyElement extends React.Component {
render() {
return (
<h1>Hello!</h1>
)
}
}
```
可以看到生成的內容為：
```
"use strict";
class MyElement extends React.Component {
render() {
return /*#__PURE__*/React.createElement("h1", null, "Hello!");
}
}
```
也就是轉換為`React.createElement`來實現。且注意到使用了`"use strict";`，這是什么意思呢？
> 即：`JavaScript` 嚴格模式
> 目的是指定代碼在嚴格條件下執行，具體而言：
> - 嚴格模式下你不能使用未聲明的變量，也就是所有變量必須先聲明后賦值；
> - 禁止`this`關鍵字指向全局對象，在嚴格模式下，函數中的`this`會轉變為`undefined`；
> - `use strict`指令只允許出現在腳本或函數的開頭；
那么，如果我們生成一個復雜的標簽內容：
~~~
class MyElement extends React.Component {
constructor() {
super();
this.datas= ["張三", "李四", "王五"]
}
render() {
return (
<ul>
{
this.datas.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
)
}
}
~~~
對應的在`HTML`頁面會生成：
```
<ul><li>張三</li><li>李四</li><li>王五</li></ul>
```
那么，對于上述`jsx`標簽的內容生成的`babel`是如何的？不妨再次使用[上面的網站](https://babel.docschina.org/repl/#)來查看：
```
"use strict";
class MyElement extends React.Component {
constructor() {
super();
this.datas = ["張三", "李四", "王五"];
}
render() {
return /*#__PURE__*/React.createElement("ul", null, this.datas.map((item, index) => {
return /*#__PURE__*/React.createElement("li", {
key: index
}, item);
}));
}
}
```
可以看見最終使用`babel`轉換后也是對應的：
```
return /*#__PURE__*/React.createElement("li", {
key: index
}, item);
```
說明創建元素我們雖然省略了，但是`babel`轉換后，還是按照正常創建流程來進行`createElement`。
