React脚手架项目路径解析

DogJay 2019-01-31 前端技术 601人已围观

先来一张路径图:

1.README.md文件为项目的注释文件

2.package.json为项目的包文件,主要包含项目的依赖项以及启动方式等,与node_modules相辅相成

3..gitignore为项目的不能上传到git仓库的排除项目

4.src为项目的工作目录,项目的源码目录

index.html对应的js文件为index.js,而index.js引用了App.js(2级)

在App.js文件中有必须项:

import React from 'react';
import ReactDOM from 'react-dom';

 

import * as serviceWorker from './serviceWorker';

serviceWorker为缓存页面,将页面存储起来。

ReactDOM.render(, document.getElementById('root'));

ReactDOM渲染了一个组件

文件App.test.js为项目的一个自动化测试文件

5.public目录中favicon.ico为项目图标,index.html内容主要包括:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

代码中标签<noscript>为,浏览器禁止javascript时给出的提示(例如IE浏览器)

<div id="root"></div>

为系统应用的整体的父元素

manifest.json文件内容为:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

主要作用为,设置应用的图标,图案等项目

 

吐槽(0)

文章评论

    共有0条评论

    验证码:

文章目录