zoukankan      html  css  js  c++  java
  • react import形式简单框架

    之前一直通过<script type="text/babel"></script>这种形式来做react练习

    现在想通过import的格式来做,想html和js分开。在实现过程中出现Unexpected token import 这种错误,原来是需要通过webpack(模块打包器)来使js可调用模块


    官网简单例子链接:https://reactjs.org/docs/add-react-to-a-new-app.html

    引用了react  react-dom  react-scripts

    react-scripts:封装了webpack

    public/index.html  固定位置和文件,index.html是起始文件

    public/manifest.json  移动app的配置文件

    App.js  自己定义的组件

    index.js  调用组件,输出到index.html

    registerServiceWorker.js  固定。注册了一个service worker,用来做资源的缓存,这样你下次访问时,就可以更快的获取资源


    练习:

    vscode+node.js

    1.在vscode中选择一个文件夹,ctrl+~  调出终端

    2.npm init  //创建package.json

    3.npm install react react-dom react-scripts

    4.将package.json文件修改

    "scripts": {
        "start": "react-scripts start"
      }

    5.创建public/index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta name="theme-color" content="#000000">
            
            <title></title>
        </head>
        <body>
            <div id="root"></div>
        </body>
    </html>

    6.创建src/registerServiceWorker.js

      即将官网例子中的这个文件拖到src下

    7.创建src/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import registerServiceWorker from './registerServiceWorker';
    
    ReactDOM.render(
        <h1>hello world</h1>,
        document.getElementById('root')
    );
    
    registerServiceWorker();

    8.执行 npm start

  • 相关阅读:
    “中国半导体教父”张汝京:中国半导体只缺人才
    集群搭建
    Scrapy
    商品建模
    python wordcloud
    StaticFileMiddleware中间件如何处理针对文件请求
    Docker / CI / CD
    NET Memory Profiler 跟踪.net 应用内存
    SOS.dll (SOS Debugging Extension)
    Download the WDK, WinDbg, and associated tools
  • 原文地址:https://www.cnblogs.com/cat66/p/8126419.html
Copyright © 2011-2022 走看看