1. 不使用JSX
優點: 不用配置有關JSX的編譯。
依賴語法：
React.createElement(component/type, props, ...chilidren); //第一個參數可以是字符串，表示原始標簽； //也可以是React.Component的子類
html頁面示例：
使用React的前提是引入react和react-dom文件;生產環境要使用production版本
<!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.js
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方法。
注意： 該方法不適用於生產環境
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"
修改類型后，文件請求默認修改成CORS請求。此時本地訪問報跨域錯誤。因為CORS不支持FILE協議。
like_button.js修改
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文件，該文件處理后的文件也適用於舊瀏覽器。
