create-react-app 工程目录介绍

//执行一下代码
npx create-react-app my-app
cd my-app
npm start

生成以下目录结构,今天就来介绍下 这些文件都是做什么的,按照顺序,从上往下开始

根目录下:

yarn.lock    项目依赖的安装包、会在这里进行限制、(我们不要动它)

README.md    项目的说明文件、这里文件你可以自己删除掉,通过markdow的语法来编写自己的内容

package.json    任何一个脚手架工具里面、都会有的文件、它代表着这个脚手架工具是一个node的包文件、主要都是node里面的内容、里面会有你项目的介绍、所依赖第三方的包、还会有一些指令供我们调用、我们之所以能通过 npm start || yarn start 命令来启动项目,实际上就是在运行scripts下的命令

你大可不必担心看不懂这个文件里面的内容、你只需要知道这个文件里面是node的包文件,可以把你的项目变成node的包就可以了、是脚手架自动生成的文件(大家轻易不要动它)

"scripts": { //npm start
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

.gittignore    如果你用git管理你的代码的时候,如果有一些文件你不想上传git仓库的时候,可以把这些文件定义在这里(不使用Git可以不管它)

node_modules:

放的是我们项目依赖的第三方的包、这些包不是我们自己写的、(我们不要动它)

public

静态资源

index.html     是我们项目首页的模板、这里面有一段代码,这个noscript的意思是在我们的网页上、把script给禁掉了、这时候会给给用户一个提示,允许网页去解析JavaScript 、是一段容错的代码,大家可以给删除掉、当然留在这里你的代码健壮性会更强。也可以留在这里

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>

manifest.json    把应用创建成快捷方式、通过快捷方式直接进入我们的网址(可以删除)

src

src目录是最重要的目录、它里面放的使我们项目的所有源代码

App.css   组件样式

App.js  组件

App.test.js  自动化测试文件、(可以删除)

index.css  入口样式

index.js   所有代码的入口文件、整个程序运行的入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';  
//它是PWA、让我们用写网页的形式 写一些App应用、serviceWorker就是让我们借助网页写手机app应用的

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

logo.svg

serviceWorker.js    用户第一次访问应用之后。在没有网络的情况下,依然可以访问只看看到的网页文件。serviceWorker会把我们的网页,储存在我们的浏览器之内(这个可以删除)

setupTests.js

发布了37 篇原创文章 · 获赞 20 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览