首先我们可以看到底部一个
yarn.lock的文件,这个文件主要是项目依赖的安装包,他的一些版本号,会在这里做一些限制,这个文件不要动就好了。
readme.md,这个文件其实是项目的说明文件,他里面会有一些关于项目的说明,我们可以全部删除掉,自己用markdown的语言做一些相关的介绍
package.json,基本上每个脚手架工具都会有这个package.json这个文件,这就代表着,实际上这是node的包文件,这里会有脚手架工具以及项目的一些介绍,他可以让你的文件编程一个node的包,这个文件一般我们不会太动他。
gitignore,如果是用git管理代码的话,有些文件,不像放进仓库里,可以把文件定义在gitignore里面
node_modules,放的是一些这个项目里面的第三方的包,这些包不是自己写的,是脚手架工具,要实现自己的功能需要依赖一些包文件,这些包文件都放在node_modules里面,这里的东西也不动他,他是一些第三方的模块
public-favicon.ico,打开网页的时候,网页标题左上角会有一个很小的icon,favicon正好就是标题上那个小的icon。
public-index.html,这个是项目首页的html模板,模板非常的简单。值得一说的是里面有个<noscript>标签,如果网页把script给禁用掉了,这个时候,我们会给用户一个提示说,你应该在你的网页开启script的适配项或者说允许网页去解析js。这个一段容错的代码。
public-manifest.json,这个文件和一个概念有关系。在index里面引入了serviceWorker,我们知道了一个PWA的概念,它可以让我们页面,用户访问一次,再次访问的时候就会在本地有完整的缓存。而这个json文件,它里面定义了,如果这个网页可以当成一个app来使用,就可以把他存储在桌面上,有一个快捷方式,在手机上,或者网页上,可以通过这个快捷方式直接进入到我这个网址。这个图标怎么展示,就可以在icons里面定义这个快捷方式的图标。也可以定义快捷方式的网址。当然我们如果不用pwa,理论上我们也是不用这个文件的。这个文件删除了之后,index.html引入了manifest.json这个文件,这个时候也可以把他删除掉
src,这是项目开发的时候最重要的一个目录,他里面放的是项目的所有源代码。所有代码的入口就在src-index.js里面
src-index.js,可以看到,js文件里面引用了react,又引入的react dom。index是整个程序的入口文件,也就是整个项目从index.js里面开始逐行的执行,首先直接引入React包,之所以能够直接引用,是因为这个脚手架工具已经在项目里面帮我们安装好了react。所以可以直接用,还有react-dom。在react.js里面还引入了css文件,可以这么理解,react他的设计理念包涵很重要的一条,就是 all in js。以前将css和js的时候是相分离的,但是在react里面,css可以像js一样,通过模块的形式嵌入到里面。所以这是他到一个新的写法。接着引入了一个App。import..from..是es6里面提供的一个模块引入的语法。他有点像amd里面的require。其实就是js文件里面引入另外一个js文件。最后引入了一个serviceWorker。这个是什么东西呢,目前前端有一个比较新的概念,叫做PWA,全称是progressvie web application。他的理念是通过网页的形式写手机的app应用。引用serviceWorker实际上就是帮助我们借助网页去写app应用的功能。他有什么效果呢。假设我们引用了他,然后我们写了一个网页。然后上传到一台支持https协议的服务器上。那么这个时候,网页就会具备这样的一个特性,当用户第一次访问我们这个页面的时候,他需要联网才能看到这个网页。但是这个用户访问到这个网页之后突然断网了,如果这个项目引用了serviceWorker,就算是断网了,他依然可以访问到之前的那个页面。因为serviceWorker会帮助我们把网页存储在浏览器之内。所以下一次即使没有网络,也可以使用这个网页。所以是做这个功能用的东西。我们开发的时候如果需要PWA这个效果,可以删除
src-App.test.js,这个文件在index.js里面没有引用到,这个文件是自动化的测试文件,当我们做react或者vue项目的时候,他里面因为会涉及到一些函数式的编程。所以我们可以做一些自动化的测试。app.test.js就是自动化测试的文件。我们平常要是用不到,也可以把他给删除掉。

react工程目录简介的更多相关文章

  1. react 工程目录简介

    创建一个 todolist 项目,下图是其工程目录. node_modules文件夹 里面存放的是我们所建项目放所依赖的第三方的包 public文件夹 favicon.ico 图标文件,网页标题左上角 ...

  2. react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)

    第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...

  3. Linux-/proc目录简介

    Linux /proc目录简介 1.简单了解 以文件系统的方式为访问系统内核数据的操作提供接口 由linux内核提供:通过/proc文件系统,在运行时访问内核内部数据结构.改变内核设置的一种机制 pr ...

  4. nodejs学习笔记一:安装express框架并构建工程目录

    偶遇node是在一个阳光明媚的上午,无意间打开博客看到一片关于nodejs的介绍,通读全篇后,心情跌宕起伏,哎呀,这么好的东西我竟然现在才知道,这是最气的,于是马上开始制定学习nodejs计划,好了, ...

  5. 初始化 Gradle 工程目录(转自: 隔叶黄莺 Unmi Blog)

    最近重新在 Eclipse 中打开旧的 Maven 项目,总有些什么错误,备受折磨.期间试手了 Ant+Ivy, 现今试用了下 Gradle,感觉不错,它应该才是我真想要的,Maven 差不多该扔到一 ...

  6. android的helloworld工程目录学习

    android的helloworld工程目录学习 Android工程的主要目录有src.gen.Android X.X.bin.res等文件夹. 1.     Src文件夹 Src文件夹包含java源 ...

  7. Android Studio工程目录介绍

    来自知乎: Android Studio工程目录结构 .gradle 是gradle运行以后生成的缓存文件夹. .idea 是android studio/Intellij IDEA工程打开以后生成的 ...

  8. C#.bat文件清理工程目录

    另外一种方法是自己写一个bat文件来清理,非常方便,下面是自己写的验证过比较好用的方法. bat文件内容如下: echo 正在清理VS2010工程中不需要的文件 echo 请确保本文件放置在工程目录之 ...

  9. IOS的工程目录结构和生命周期

    IOS的工程目录结构和生命周期 ·simple table文件夹:工程相关源代码和配置文件 BIDAppDelegate :    委托的声明和实现 BIDViewController:    视图控 ...

随机推荐

  1. 转 Nmon 监控生成数据文件字段的介绍

    ##发现nomon 一个好用的功能 数据透视图 PIVOTCHART:这些参数被用来构建数据透视图.所需的参数:Sheetname,PageField,rowfield,columnfield,Dat ...

  2. pandas中,dataframe 进行数据合并-pd.concat()

    ``# 通过数据框列向(左右)合并 a = pd.DataFrame(X_train) b = pd.DataFrame(y_train) # 合并数据框(合并前需要将数据设置成DataFrame格式 ...

  3. 三大视频网站Url的处理保存(视频和图片二选一操作)

    前台Js // 视频处理 var textVideoLink=$("input[name='textVideoLink']").val(); // 去除所有有的引号和空格 var ...

  4. 【MFC】消息大全

    转自:http://www.cnblogs.com/orez88/articles/2119450.html 消息,就是指Windows发出的一个通知,告诉应用程序某个事情发生了.例如,单击鼠标.改变 ...

  5. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  6. HDU 5011 NIM博弈

    http://www.cnblogs.com/exponent/articles/2141477.html http://acm.hust.edu.cn/vjudge/contest/122814#p ...

  7. 从零开始的全栈工程师——html篇1.3

    文本.字体css样式与前期英语单词汇总 一.文本样式(text) 1.颜色:color:red; 2.文本对齐方式:text-align:left/center/right/justify; left ...

  8. oracle学习篇五:组函数,分组统计

    常用组函数: 1.ccount() 求出全部记录数. 2.max() 求出一组最大值 3.min() 求出一组最小值 4.avg() 求出平均值 5.sum() 求和 --1.统计员工数量: sele ...

  9. IO流之IO的异常处理

    如果发生了IO的异常.我们在实际开发中,对异常时如何处理的,我们来演示一下. public class FileOutputStreamDemo3 { public static void main( ...

  10. flask-session总结

    一.session       session和cookie的原理和区别: cookie是保存在浏览器上的键值对             session是存在服务端的键值对(服务端的session就是 ...