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)
下一篇:Redis 配置文件详解