62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
# Node.js與npm
|
||
Nodejs:一個不需要開啟網頁就能夠執行javascript的環境
|
||
npm(node package manager): 一個套件管理工具，類似於pip、nuget
|
||
|
||
npm這個工具本身是由javascript寫出來的，所以需要node.js在背景持續執行
|
||
使用React前端框架照理說不需用到Node.js，但是需要npm去安裝一些前端框架會用到的工具
|
||
常用套件工具:
|
||
React 本體（react、react-dom)
|
||
開發工具（Vite / Webpack）
|
||
TypeScript 支援（若使用 TypeScript）
|
||
狀態管理（Redux, Zustand）
|
||
UI 框架（Tailwind CSS, Material UI）
|
||
前端路由（React Router）
|
||
API 請求（axios, fetch）
|
||
|
||
# Vscode編譯器
|
||
vscode本身沒有支援npm，需去下載nodejs，https://nodejs.org/zh-tw
|
||
|
||
|
||
下載完vscode終端檢查有無node.js
|
||
```
|
||
node -v
|
||
```
|
||
檢查有無npm
|
||
```
|
||
npm -v
|
||
```
|
||
|
||
|
||
# Package.json
|
||
這個跟nuget一樣會有一個dependencies去記錄你安裝的套件
|
||
```
|
||
"dependencies": {
|
||
"react": "^18.2.0",
|
||
"react-dom": "^18.2.0",
|
||
"react-router-dom": "^6.7.0"
|
||
}
|
||
```
|
||
當別人拿到你的程式碼時，他們只需要執行
|
||
```
|
||
npm install
|
||
```
|
||
|
||
先下載Node.js 並安裝
|
||
|
||
於準備開發的資料夾下方開啟CMD
|
||
|
||
檢查有無node.js
|
||
```
|
||
npm -v
|
||
```
|
||
# React
|
||
## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始
|
||
先下載Node.js 並安裝
|
||
|
||
於準備開發的資料夾下方開啟CMD
|
||
|
||
檢查有無node.js
|
||
```
|
||
npm -v
|
||
```
|