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


    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文件,该文件处理后的文件也适用于旧浏览器。

      

  • 相关阅读:
    深入浅出Powershell——创建本地账号
    SharePoint快速调试技巧
    深入浅出PowerShell——设置用户群组
    深入浅出SharePoint——权限提升
    伪数组
    用例的类型与粒度
    将 RTC 客户端 API 用于可缩放的应用程序
    InstallShield 收藏
    开发工具总结
    WEB免费打印控件推荐
  • 原文地址:https://www.cnblogs.com/lyraLee/p/11885487.html
Copyright © 2020-2023  润新知