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浏览器)

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

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)

上一篇：React学习感悟——初始化一个React项目

下一篇：Redis 配置文件详解

React脚手架项目路径解析

文章评论

文章目录