React基礎學習筆記（二）—— 項目目錄學習
一、目錄結構
前面一篇React基礎學習已經創建了一個空的項目，我們可以先看一下目錄結構：
react-app/
node_modules/
public/
favicon.ico
index.html
logo192.png
logo512.png
manifest.json
robots.txt
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js
.gitignore
package.json
package-lock.json
README.md
1、 node_modules
這個目錄是我們使用npm install本地安裝命令安裝了依賴包的放置目錄，也就是用來盛放你安裝的所有node模塊的文件夾。
2、public/
這個目錄用來放置所有公共資源的文件夾，比如html、圖標
（1） favicon.ico、logo192.png、logo512.png 是頁面顯示的圖標和圖片
（2）manifest.json:
這個文件是告知瀏覽器一些信息，比如應用圖標、啓動畫面。
icons指定了需要的圖片來源、大小、類型； start_url指定了開始頁面就是public/index.html(.就是直接訪問此文件的所在目錄，存在index.html)； display是指定顯示模式，這裏是standalone；theme_color定義應用程序的默認主題顏色
詳細說明可以參考：manifest 成員
//public/manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
（3）index.html
此文件就是網站的主頁了，尤其注意:
<div id="root"></div>
我們將其稱爲“根” DOM 節點，因爲該節點內的所有內容都將由 React DOM 管理。想要將一個 React 元素渲染到根 DOM 節點中，只需把它們一起傳入 ReactDOM.render()，具體如何渲染會在後面進行介紹。
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using cry-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
（4）robots.txt：搜索引擎baispider(蜘蛛)在訪問一個網站時，會先檢查該網站目錄是否存在robots.txt文件。這個文件用於指定spider(蜘蛛)在網站抓取的範圍，也就是你想讓他抓取部分和你不想讓他抓取部分的說明文件。
User-agent: * 表示允許所有搜索引擎蜘蛛來爬行抓取。也可以把 * 去掉，改爲特定某一個或者某些搜索引擎蜘蛛來爬行抓取，如百度是Baiduspider，谷歌是Googlebot。
Disallow: 是說明不允許搜索引擎蜘蛛抓取的URL路徑，如Disallow: / 就是禁止收錄根目錄下的所有文件。
#// public/robots.txt
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
3、src/
（1） App.css、App.js、App.test.js
index.css、index.js
（2） logo.svg 默認的一個簡單圖標
（3） serviceWorker.js
（4）setupTests.js
4、.gitignore：在該文件中定義git提交時相應的忽略規則
5、 package.json：描述項目及項目的各種模塊安裝信息、腳本信息等
6、 package-lock.json：用於鎖定模塊安裝版本的，能確保安裝的模塊版本一致。
7、README.md：項目的說明文檔