React脚手架

create-react-app

项目的整体架构技术为:react+webpack+es6+eslint
使用脚手架开发的项目特点:模块化,组件化,工程化

创建项目并启动
1.npm install -g create-react-app
2.create-react-app comedyReact
3.cd comedyReact
4.npm start
目录

SPA应用:singal page application单页面应用

public
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口,用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签+地址栏的颜色,仅支持android,兼容性不好 -->
    <meta name="theme-color" content="#000000" />
    <!-- 描述网站信息 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- Safari萨法lui添加主屏幕图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳配置(webview) -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>

  <body>
    <!-- if浏览器不支持js -->
    <!-- public/robots.txt 爬虫规则文件 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>
src
index.js—入口文件
ReatDom.render(
      <React.StrictMode>  //检查
            <App />
      </React.StrictMode>
)
reportWebVitals.js

页面性能检测,(需要web-vitals库的支持)

setupTest.js

组件单元测试文件,(需要jest-dom库的支持)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容