react開發環境搭建 create-react-app,工程目錄簡介

react開發環境搭建 create-react-app

有兩種方式使用react

1. 引入.js文件來使用react
2. 通過腳手架工具，官方提供腳手架create-react-app健壯性好，簡單，定製性強，調試方便
   接下里，開始環境搭建
   1> 首先打開官網，https://reactjs.org,進入doc，右側的installation->add react to new app,如圖
   
   找到create-react-app，開始安裝
   2>得安裝npm和node.
   3>mac版本
   終端進入桌面，執行如下操作。
   npx create-react-app my-app
   cd my-app
   npm start
   
   
   到此， create-react-app腳手架react開發環境搭建完成

工程目錄簡介

1、README.md是一些簡單介紹，自己可以將內容刪除改爲此項目的簡單介紹等
2、package-lock.json 項目一來安裝包版本號
3、package.json 任何一個腳手架工具裏面都有這個文件，代表這個腳手架是node的一個包文件，有項目的一些簡單介紹，一些react的依賴和指令
4、.gitignore文件 一些不想上傳到git的文件
5、node_modules 項目依賴的一些第三方的包
6、public目錄

1. favicon.ico是下圖圖標
   
   2. index.html
      項目首頁的html模版
   3. manifest.json

7、src目錄,項目開發最重要的文件，放置所有源代碼

1. App.css
2. App.js
3. App.test.js 自動化測試文件
4. index.css
5. index.js 所有代碼入口，整個工程入口
6. logo.svg
7. serviceWorker.js
   pwa（ progressive web application ） 理念是 通過寫網頁的方式寫移動端的app。在https協議的服務器上，當用戶第一次訪問的時候需要聯網才能看到網頁，但是一旦用戶訪 問完網頁然後斷網，並且引用了下面的文件，即使斷網，第二次訪問的時候，依然可以看到之前訪問的頁面。serviceWorker協助將之前的網頁存儲在瀏覽器之內

有些文件是一般用不到的，所以一個簡單的react工程的目錄就是下圖