前言：
react 是前端三大框架中之一,而且大公司基本都在用react 包括百度也在使用 他有自己的獨特的虛擬dom
build-react-cli是幫助你快速創(chuàng)建生成react項目的腳手架工具，配置了多種可選擇的不同類型項目模版。
一、使用create-react-app創(chuàng)建react應(yīng)用
1、什么是 react 腳手架？
- xxx腳手架: 用來幫助程序員快速創(chuàng)建一個基于xxx庫的模板項目
- 包含了所有需要的配置（語法檢查、jsx編譯、devServer…）
- 下載好了所有相關(guān)的依賴
- 可以直接運行一個簡單效果
- react提供了一個用于創(chuàng)建react項目的腳手架庫: create-react-app
- 項目的整體技術(shù)架構(gòu)為: react + webpack + es6 + eslint
- 使用腳手架開發(fā)的項目的特點: 模塊化, 組件化, 工程化
2. 創(chuàng)建 cli 腳手架方式1
- 先全局安裝腳手架工具包
命令：npm i -g create-react-app - 用腳手架工具來創(chuàng)建項目
命令：create-react-app+ 項目名稱 - 啟動項目
命令：npm start
3. 創(chuàng)建 cli 腳手架方式2
直接使用npx來創(chuàng)建項目
- 命令：
npx create-react-app+ 項目名稱 - 解釋：
npx create-react-app是固定命令，create-react-app是React腳手架的名稱 - 啟動項目
命令：npm start
4. npx:
-
npx是npm v5.2版本新添加的命令，用來簡化npm中工具包的使用 - 沒有
npx之前：- 全局安裝
npm i -g create-react-app - 在通過腳手架的命令來創(chuàng)建
React項目
- 全局安裝
- 有了
npx之后-
npx調(diào)用最新的create-react-app直接創(chuàng)建React項目
-
5. react腳手架項目結(jié)構(gòu)
public ---- 靜態(tài)資源文件夾：
- favicon.icon ------ 網(wǎng)站頁簽圖標(biāo)
- index.html -------- 主頁面
- logo192.png ------- logo圖
- logo512.png ------- logo圖
- manifest.json ----- 應(yīng)用加殼的配置文件
- robots.txt -------- 爬蟲協(xié)議文件
src ---- 源碼文件夾：
- App.css -------- App組件的樣式
- App.js --------- App組件
- App.test.js ---- 用于給App做測試
- index.css ------ 樣式
- index.js ------- 入口文件
- logo.svg ------- logo圖
- reportWebVitals.js
- 頁面性能分析文件(需要web-vitals庫的支持)
- setupTests.js
- 組件單元測試的文件(需要jest-dom庫的支持)
6. 功能界面的組件化編碼流程（通用）
- 拆分組件: 拆分界面,抽取組件
- 實現(xiàn)靜態(tài)組件: 使用組件實現(xiàn)靜態(tài)頁面效果
- 實現(xiàn)動態(tài)組件
- 動態(tài)顯示初始化數(shù)據(jù)
- 數(shù)據(jù)類型
- 數(shù)據(jù)名稱
- 保存在哪個組件?
- 交互(從綁定事件監(jiān)聽開始)
- 動態(tài)顯示初始化數(shù)據(jù)
7. 如何更改腳手架版本
- 由于
create-react-app my-app安裝的都是最新的版本 所以我們需要指定版本，直接執(zhí)行下面的步驟就可以 - 腳手架創(chuàng)建完成后改變
package.json中的react版本
- 更改為指定版本后刪除
node_modules文件，重新npm i下載配置 - 配置完成后運行會報錯，因為組件中使用的還是源版本配置
- 刪除
public和src文件夾下所有文件，根據(jù)當(dāng)前版本進(jìn)行配置 - 只需要配置完成
public下的index.html文件，和src下的index.js和App.js文件。 -
public下index.html文件的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="./favicon.ico" /> <!-- 當(dāng)前行為引入 logo 圖標(biāo)，如果無需引入可以不寫 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/bootstrap.css">
<title>react-redux</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
-
src下的index.js文件
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.render(<App />, document.getElementById('root'));
-
src下的App.js文件
import React from 'react'
export default function App() {
return (
<div>
App組件
</div>
)
}
- 使用
npm start運行項目即可
二、React 組件的組合使用
在 React 中，父子組件的通信是常見的問題，除了使用狀態(tài)管理工具（如redux）以外，也可以實現(xiàn)父子組件的相互通信。
其中，父組件可以通過props、原型方法向子組件通信，子組件可以通過回調(diào)函數(shù)、事件冒泡向父組件通信。
1. 父傳子（props傳參）
如下代碼，list 作為 props 由父組件傳遞給子組件，子組件拿到 list 后，渲染在頁面上。
參數(shù) list 由父組件傳遞給了子組件。
// 父組件
import React, { Component } from 'react'
import List from "./components/List"
export default class App extends Component {
state = {
// 渲染數(shù)據(jù)
list: [
{ id: 0, title: '111', show: true, checked: false },
{ id: 1, title: '222', show: true, checked: false },
{ id: 2, title: '333', show: true, checked: false },
],
}
render() {
return (
<div>
<List list={this.state.list} />
</div>
)
}
}
// 子組件
import React, { Component } from 'react'
export default class index extends Component {
render() {
const { list } = this.props
return (
<div>
<ul className="todo-main">
<Item list={list}/>
</ul>
</div>
)
}
}
2. 子傳父
父組件需要向子組件傳遞一個函數(shù)，然后，子組件通過props獲取函數(shù)并附上參數(shù)，最后，父組件通過函數(shù)拿到子組件傳遞的值。
// 父組件
import React, { Component } from 'react'
import List from "./components/List"
export default class App extends Component {
changeitem = (e, id) => {
console.log('子傳父接收');
}
render() {
return (
<div>
<List changeitem={this.changeitem} />
</div>
)
}
}
// 子組件
import React, { Component } from 'react'
export default class index extends Component {
// 子傳父觸發(fā)事件（單選框改變事件）
changeitem = (e, id) => {
// 子傳父
this.props.changeitem(e, id)
}
render() {
return (
<div></div>
)
}
}
3. TodoList 代碼示例
功能: 組件化實現(xiàn)此功能
- 顯示所有todo列表
- 輸入文本, 點擊按鈕顯示到列表的首位, 并清除輸入的文本
因代碼過多無法在當(dāng)前頁面展示，當(dāng)前資源已上傳，點擊跳轉(zhuǎn)
4. TodoList 效果展示
功能: 組件化實現(xiàn)此功能
- 顯示所有todo列表
- 輸入文本, 點擊按鈕顯示到列表的首位, 并清除輸入的文本
總結(jié)：
歡迎大家加入我的社區(qū)，在社區(qū)中會不定時發(fā)布一些精選內(nèi)容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003文章來源：http://www.zghlxwxcb.cn/news/detail-420769.html
以上就是 React應(yīng)用(基于React腳手架)，不懂得也可以在評論區(qū)里問我或私聊我詢問，以后會持續(xù)發(fā)布一些新的功能，敬請關(guān)注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog文章來源地址http://www.zghlxwxcb.cn/news/detail-420769.html
到了這里，關(guān)于React應(yīng)用(基于React腳手架)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
