文章目錄
重點大綱提煉
- 腳手架
- create-react-app
- create-react-app <要創建的app應用>
- package.json
- npm start：啓動本地應用(web)
- npm run build：生成應用最終代碼（生成的代碼會被同步到正式的服務器中）
Create-react-app介紹與開發環境詳述
介紹
通過前面 script 的方式雖然也能完成 React.js 的開發，但是有一個現在前端很重要的特性 - 模塊化，無法使用。
Create React App
Create React App 是一個使用 Node.js 編寫的命令行工具，通過它可以幫助我們快速生成 React.js 項目，並內置了 Babel、Webpack 等工具幫助我們實現 ES6+ 解析、模塊化解析打包，也就是通過它，我們可以使用 模塊化 以及 ES6+ 等更新的一些特性。同時它還內置 ESLint 語法檢測工具、Jest 單元測試工具。還有一個基於 Node.js 的 WebServer 幫助我們更好的在本地預覽應用，其實還有更多。
這些都通過 Create React App 幫助我們安裝並配置好了，開箱即用
安裝與使用
通過 npm、yarn、npx 都可以
安裝
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
使用
安裝完成以後，即可使用 create-react-app 命令
create-react-app <項目名稱>
或者通過 npx 的方式
npx
npx create-react-app <項目名稱>
推薦mac上iTerm工具增加終端的很多功能！windows下推薦Cmder，本人強烈推薦Win10應用商店的Terminal。
項目目錄結構說明
運行命令以後，就會在運行命令所在目錄下面創建一個以項目名稱爲名的目錄
my-app/
README.md （markdown說明文件）
node_modules/ （安裝的基礎庫、依賴庫）
package.json
public/
index.html （整個應用的入口頁面）
favicon.ico
src/ <重點>（開發目錄：開發代碼放在這裏）
App.css
App.js
App.test.js
index.css
index.js
logo.svg
\test\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 create-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>
命令腳本
create-react-app 同時也提供了其它一些命令來幫助我們進行開發
package.json 提供了一系列編譯命令（npm xxx 如：npm start）
start啓動本地開發環境，會在本地臨時啓動一個服務器
build項目開發完成以後，項目上線到服務器端（不可能把源代碼扔進去），通過babel webpack 打包好的代碼，最終扔給服務器。
test測試應用
npm start
啓動一個內置的本地 WebServer，根目錄映射到 ‘./public’ 目錄，默認端口：3000
這種情況下是開發模式，即本地開發的環境，開發完成之後需要項目上線。src目錄下的代碼是需要交給服務器的，而服務器運行的環境並不一定是本地的dev-server（基於node的服務器），而線上跑的可能是Nginx，或者Apache等一些其他的服務器軟件。而通過打包命令，即build，把它打包成瀏覽器能運行的，可以直接跑的，即丟在任何地方都可以運行。
npm test
運行 Jest 測試
npm run build
打包應用（準備上線）
發現這裏多引入了js的一個打包後的入口文件：<script src="/static/js/2.5eb979f8.chunk.js"></script>
但在原來的index.html文件中是不存在的。而index.html只是一個臨時的模板文件，打包的時候，會自動把它作爲項目頁面，並把打包好js自動創建script標籤引入進來。
src目錄（開發階段）：
index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
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();
App.js
這裏App函數其實就是一個組件（return一個jsx結構），我們發現它導出去的是一個函數，然後在index.js中直接當標籤使用的！也沒有去調用函數。這是怎麼做到的呢？這其實就是JSX在執行過程中，如果發現它是一個函數或者是一個類的話，它會先執行該函數或類中的render方法，把它的返回值寫在標籤中，這是一種標籤化的使用方法，也稱組件化。我們後面的代碼基本都是基於組件化進行開發的。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
（後續待補充）