資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究為什麼需要在React.js中構建工作流
構建工作流有助於以下方面
- 它最佳化程式碼
- 使用下一代JavaScript (ES6)
- 這是單頁面/多頁面應用程式的標準方法
- 高效的方法
- 輕鬆整合使用NPM或Yarn的依賴項
- 使用像webpack這樣的打包器來更輕鬆地進行模組化程式碼和程式碼釋出
- 預編譯器，例如Babel
- 我們可以使用本地開發伺服器來測試應用程式
構建工作流看起來很複雜，但是React社群已經透過一個簡單的命令簡化了它。
create-react-app.
要使用create-react-app，我們需要在我們的機器上安裝node.js。
你可以在終端使用以下命令檢查node是否已安裝：
node –version
如果尚未安裝，請安裝最新的node.js。安裝node.js的同時，npm也會被安裝。
要檢查npm，請在終端使用以下命令：
npm -version
npm是節點包管理器，它幫助我們處理專案的依賴項。yarn也是類似的工具。
完成上述步驟後，讓我們建立React應用程式。
- npm install -g create-react-app
- create-react-app my-app
- cd my-app
- npm start
這些命令的描述如下：
npm install -g create-react-app => 它安裝React的全域性配置，可以為單頁應用程式構建常用的工作流。
在Linux/macOS系統上執行此命令可能需要在前面新增sudo關鍵字。
- create-react-app my-app => 使用此命令，它將建立一個名為my-app的專案，其中包含所有常用的構建工作流。
- cd my-app => 我們進入my-app資料夾。
- npm start => 它通常在3000埠啟動我們my-app的本地開發伺服器。
我們可以在同一個終端使用**ctrl + c**關閉開發伺服器。
package.json檔案包含專案所需的依賴項。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}正如你所看到的，我們已經添加了react、react-dom和react-scripts依賴項。
當我們執行**npm start**時，它實際上執行的是上面檔案中(react-scripts start)命令。
類似地，build命令執行。它最佳化我們的程式碼，無需執行開發伺服器，並建立可立即使用的檔案。
node_modules包含所有其他必需的依賴項，但我們通常不需要在那裡進行任何操作。
PUBLIC資料夾
我們在public資料夾中有一個重要的檔案，那就是index.html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <!-- 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`. --> </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>
我們的指令碼檔案將由工作流本身注入到此index.html檔案中，因此我們不需要手動新增。
它在index.html的下面一行渲染React元件。
<div id="root"></div>
SRC資料夾
在src資料夾中，我們有index.js檔案，在這個檔案中，我們從index.html檔案中獲取根div，並在那裡掛載我們的應用程式。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();我們從app.js檔案中獲取內容。隨意編輯render方法中的文字，並在瀏覽器中檢視更改。
import React from 'react';
import logo from './logo.svg';
import './App.css';
x
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.
x </p>
<a
className="App-link"
href="https://react.com.tw"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
664 次瀏覽
