在開始學(xué)習(xí)之前,請(qǐng):
- 下載個(gè)人IDE烛恤，推薦vscode官網(wǎng)
- 安裝node鹤盒，node官網(wǎng)
下載完了之后义起，打開bash(cmd)或者vscode的終端西轩，先檢查一下node版本號(hào)以便查看node是否安裝好芍碧，輸入：node -v;查看npm版本號(hào)：npm -v;
我所寫的demo都是基于以下版本
- node: v10.23.0
- npm: 6.14.8
所用工具
我選擇了create-react-app作為創(chuàng)建react項(xiàng)目栅迄，原因有二:
- 可信賴度高痕惋，create-react-app是由react官方支持的創(chuàng)建react應(yīng)用程序的方法;
- 省時(shí)省力区宇，只需專注代碼，無需做webpack值戳，babel等配置议谷，create-react-app預(yù)先配置好了且隱藏了該配置.
項(xiàng)目創(chuàng)建步驟
-
新建一個(gè)項(xiàng)目工程文件夾(往后將存放所有有關(guān)于react的項(xiàng)目)，名為my-react:
my-react 文件夾
-
用vscode打開該文件夾堕虹，打開終端卧晓，輸入命令:
npm i create-react-app -g全局安裝react腳手架:
全局安裝腳手架 -
使用
create-react-app react_demos創(chuàng)建項(xiàng)目(安裝時(shí)注意查看warnings芬首，若node版本太低，記得適當(dāng)將node版本升級(jí)):
創(chuàng)建react_demos項(xiàng)目1
創(chuàng)建react_demos項(xiàng)目2
項(xiàng)目創(chuàng)建完之后會(huì)自動(dòng)生成一個(gè)react_demos文件夾逼裆，結(jié)構(gòu)如下圖所示:
我大概解釋一下這個(gè)目錄:
- node_modules是node模塊郁稍，里面存放了項(xiàng)目的依賴包，可以使用
npm i [packageName] -S來安裝我們所需要的包; - public是用來存放模板頁面以及其他不需要打包編譯的文件(比如胜宇，第三方插件)耀怜，public/index.html是頁面模板;
- src是存放開發(fā)時(shí)我們書寫源代碼的文件夾，webpack將來會(huì)打包編譯處理這其中的文件桐愉，src/index.js是項(xiàng)目的入口;
- 對(duì)于這public/index.html和src/index.js财破，最好不要?jiǎng)h除或修改文件名，但其他文件隨意刪除;
-
輸入命令：
cd react_demos進(jìn)入項(xiàng)目从诲，并npm start啟動(dòng)該項(xiàng)目左痢，你會(huì)發(fā)現(xiàn)項(xiàng)目自動(dòng)啟動(dòng)成功且自動(dòng)打開http://localhost:3000地址，你能看到一個(gè)react的示例項(xiàng)目:
項(xiàng)目展示 刪除public,src中不必要的文件(記得在index.js以及index.html中刪除引用系洛，不然會(huì)報(bào)錯(cuò))俊性，修改過后的index.js中代碼如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
ReactDOM.render(
<div>你好，蘇夏大佬</div>,
document.getElementById('root')
);
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"
/>
<title>跟著蘇夏學(xué)react</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
最后保存打開瀏覽器描扯，會(huì)發(fā)現(xiàn)頁面如下:
看到這里定页，你應(yīng)該對(duì)如何使用create-react-app如何搭建一個(gè)項(xiàng)目有一個(gè)大致的了解了，下期將講述怎么使用該框架荆烈，并會(huì)寫一些簡(jiǎn)單的demo從而達(dá)到學(xué)習(xí)的目的拯勉。
