首先我們可以看到底部一個
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就是自動化測試的文件。我們平常要是用不到，也可以把他給刪除掉。