zoukankan      html  css  js  c++  java
  • React的基本使用

    一、初始化和安装依赖

    ①建立项目文件夹

    mkdir react-demo
    cd react-demo

    ②在项目里执行命令:初始项目

    npm init -y

    ③安装相关依赖

    npm install --save react react-dom @babel/standalone
    • react是核心库
    • react-dom是操作dom的库
    • @label/standalone
        <p>@babel/standalone可以在浏览器中调用babel的api完成ES6-ES5的转换</p>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <!-- 正常模式:浏览器调用babel提供的转换api完成编译转换,得到结果字符串 -->
        <script>
            var input = 'const getMessage=()=>"hello world";'
            var output = Babel.transform(input,{presets:['es2015'] }).code;
            //console.log(output);
            /*"use strict";
    
                var getMessage = function getMessage() {
                return "hello world";
                };
            */
            // 使用evel可以使字符串执行
            window.eval(output);
        </script>
        <!-- 简单模式:babel自动编译执行,可以返回结果 -->
        <script type="text/babel">
            const getMessage=()=>"hello world";
            console.log(getMessage());//hello world
        </script>

    二、输出helloworld

        <div id="app"></div>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script type="text/babel">
            // react的核心理念就是:组件化,不支持管理DOM模板,必须把所有的模板都放到组件中
            // 这种将html和 JavaScript混写的方式叫做JSX语法,该语法必须通过babel编译浏览器才能执行
            // 将一个h1标签渲染到指定的页面入口中
            ReactDOM.render(<h1>hello world</h1>,document.getElementById('app'))
        </script>

  • 相关阅读:
    查询SQL数据库中表占用资源情况的语句
    修改VMware网卡MAC的方法
    Ajax 与 .net Validator
    控件属性值绑定到数据
    一个设计的小例子警察抓小偷
    加密Web.config 文件中的敏感信息
    VS .Net 2005程序集换名之后的遗留问题
    为ASP.Net 创建和配置应用程序服务数据库
    ArcGIS 9.0 在Windows XP SP2 上安装的问题(数据保护造成的)
    使用客户端脚本
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9433984.html
Copyright © 2011-2022 走看看