zoukankan      html  css  js  c++  java

  • React 入门

    资料

    https://react.docschina.org/tutorial/tutorial.html

    https://material-ui.com/zh/getting-started/usage/

    前端库搜索 https://packagephobia.now.sh/ 

    开始

    1. 创建新的 React 应用

    然后

     public/index.html 里的头部

       <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    meta 里的相关内容请点击链接：

     其余见英文注释

    2020年4月 在浏览器中使用 ES6 

    现在的 JS 都只包含了 ES5 规范的，但没有包含 ES6 。

    但要注意：以下两种方式的ES6支持，都不能用NodeJS那种import。因为浏览器的 Import 不支持非文件路径的（如 import React from 'react'; ），只支持文件路径（如 import React from './my.js';），参考帖子 在浏览器中使用ES6的模块功能 import 及 export 

    要在浏览器中使用，要分两种情况

    1. 代码中没有 JSX 的

    只需要使用 type="module"属性（仅较新的浏览器支持）， 具体见 MDN 文档 -Module

    <script type="module" src="./react/i.js"></script>

    2. 代码中含 JSX 的

    例子如下（使用了 React+MaterialUI，纯浏览器环境，无需NodeJS编译）

       首先要引入 Babel-Standalone，并给需要JSX和ES6的script标签加上 type="text/babel" 以指定使用 Babel-Standalone 实时编译

     1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4 <head>
 5     <title>My React Demo</title>
 6     <meta charset="utf-8" />
 7     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
 8 
 9     <!-- support JSX and ES6-->
10     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js" crossorigin></script>
11     <!-- React && MaterialUI -->
12     <script src="https://cdn.bootcss.com/react/16.13.1/umd/react.development.js" crossorigin></script>
13     <script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.development.js" crossorigin></script>
14     <script src="https://unpkg.zhimg.com/@material-ui/core@4.9.10/umd/material-ui.development.js"  crossorigin="anonymous"></script>
15     <!-- requirejs for import(require) using -->
16     <!-- <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script> -->
17 
18     <!-- Material rel support -->
19     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
20     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
21 
22 
23     <!-- load my React, by using JSX PreProcessor(Babel) -->
24     <script type="text/babel" src="./react/index.js"></script>
25     <script type="text/babel" src="./react/func.js"></script>
26     <script type="text/babel" src="./react/MaterialUI/ui.js"></script>
27     <!-- <script type="module" src="./react/i.js"></script> -->
28 </head>
29 
30 <body>
31     <div id="root"></div>
32     <div id="func"></div>
33     <div id="app"></div>
34 
35 
36 </body>
37 </html>
    index.html
     1 function formatName(user) {
 2     if (user) {
 3         return user.firstName + ' ' + user.lastName;
 4     } else {
 5         return 'Stranger!';
 6     }
 7 }
 8 
 9 
10 const user = {
11     firstName: 'Harper',
12     lastName: 'Perez'
13 };
14 
15 const element = (
16     <h1>
17         Hello, {formatName(user)}
18     </h1>
19 );
20 
21 ReactDOM.render(
22     element,
23     document.getElementById("root")
24 );
    index.js
     1 // the necessary declaration of MaterialUI when not using `import` 
 2 const {
 3     Button,
 4 } = MaterialUI
 5 
 6 function App() {
 7   return (
 8     <Button variant="contained" color="primary">
 9       你好，世界
10     </Button>
11   );
12 }
13 
14 function Test() {
15     return (
16         <p>Test...</p>
17     );
18 }
19 
20 ReactDOM.render(<App />, document.querySelector('#app'));
    ui.js
     1 function tick() {
 2     
 3     const element = (
 4         <div>
 5             <h1>Hell Func</h1>
 6             <h2>Now is {new Date().toLocaleTimeString()}.</h2>
 7         </div>
 8     );
 9 
10     ReactDOM.render(element, document.getElementById("func"));
11 }
12 
13 
14 setInterval(tick, 1000);
    func.js

    效果图

    再加上 VSCode 插件 Live Server ，保存即自动刷新。实时可见的敲代码太爽了

     设置VSCode自动保存就更爽了

    // the necessary declaration of MaterialUI when not using `import` 
const {
   Button,
} = MaterialUI

    这行是浏览器环境通过 Babel-Standalone 实时编译使用 MarterialUI 必须的，它声明了 Button 这个常量
    大概相似于 NodeJS 环境下的

    import Button from '@material-ui/core/Button';

    　目前仅有  @material-ui/core 支持UMD，@material-ui/icons 暂不支持，所以不能在未编译下使用类似      <MenuIcon />  ，但可以用 

               <SvgIcon>
                  <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
                </SvgIcon>

    　UMD 详见 https://material-ui.com/zh/guides/migration-v3/#umd

     

    --------蓝天上的云_转载请注明出处.
  • 相关阅读:
    安装annoconda参考链接，一次成功
    调参入坑记录，未完待续。。。
    关于Python的根目录问题
    关于numpy和pytorch一些函数的对应和踩坑记录
    Pytorch中 detach() item() cpu() numpy()互相转换
    发生异常: TypeError rsub() received an invalid combination of arguments
    Pytroch中'Tensor' object is not callable问题分析
    RuntimeError: grad can be implicitly created only for scalar outputs问题分析
    欧氏距离相关
    华为网络技术大赛模拟题目
  • 原文地址：https://www.cnblogs.com/yucloud/p/12416823.html
Copyright © 2011-2022 走看看