普通頁面引入React(使用和不使用JSX)

1. 不使用JSX

優勢: 不用配置有關JSX的編譯。javascript

依賴語法：html

React.createElement(component/type, props, ...chilidren);
//第一個參數能夠是字符串，表示原始標籤； //也能夠是React.Component的子類

html頁面示例：

使用React的前提是引入react和react-dom文件;生產環境要使用production版本java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="like_button_container"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="./like_button.js"></script>
</body>
</html>

like_button.jsreact

const e = React.createElement; // 簡化代碼 // LikeButton是一個React類組件
class LikeButton extends React.Component{ constructor(props) { super(props); this.state = { liked: false } } render() { return e('button', { onClick: () => { this.setState({ liked: true }) } }, this.state.liked ? this.props.name : 'UnLike') } } const domContainer1 = document.querySelector('#like_button_container'); // e(LikeButton)至關於e(LikeButton, undefined, undefined);  // type=Class, props={name: '1'}, children=undefined
ReactDOM.render(e(LikeButton, {name: '1'}), domContainer1);

2. 快速使用JSX

JSX元素本質上調用React.createElement方法。npm

注意：該方法不適用於生產環境跨域

html頁面修改部分：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="./like_button.js" type="text/babel"></script>

首先，添加了babel文件，用於編譯JSX語法；瀏覽器

其次， like_button.js文件必須添加類型type: "text/babel", 由於script標籤默認"text/javascript"babel

修改類型後，文件請求默認修改爲CORS請求。此時本地訪問報跨域錯誤。由於CORS不支持FILE協議。app

like_button.js修改dom

class LikeButton extends React.Component{ constructor(props) { super(props); this.state = { liked: false } } render() { return ( <button onClick={() => { this.setState({ liked: true }) }}> {this.state.liked ? this.props.name : 'UnLike'} </button>
 ) } } const domContainer1 = document.querySelector('#like_button_container'); ReactDOM.render(<LikeButton name="1" />, domContainer1);

3. 將JSX加入項目

能夠用於生產環境的JSX配置環境。不須要手動引入babel。

html文件同1中html文件；js文件同2中js代碼。

1. 安裝JSX預處理器

1. 初始化項目

npm init -y

2. 安裝babel和react預處理器

npm install babel-cli@6 babel-preset-react-app@3

2. 運行JSX預處理器

建一個文件夾，命名src; 將使用了JSX語法的like_button文件放入其中

運行下面的命令，啓動一個JSX自動監聽器，編輯源文件，會自動轉化

npx babel --watch src --out-dir . --presets react-app/prod

運行後，會在外面生成一個預處理事後的js文件，該文件處理後的文件也適用於舊瀏覽器。