資訊專欄INFORMATION COLUMN
摘要：首先是一個(gè)基于和的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開發(fā)體驗(yàn)，還額外內(nèi)置了和，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架。本教程是利用的開放來做一個(gè)一樣的網(wǎng)站，以此來學(xué)習(xí)框架的使用。寫的不好的地方還請(qǐng)多多包涵，大家一起學(xué)習(xí)。
dva 首先是一個(gè)基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架。
本教程是利用cnode的開放api來做一個(gè)一樣的網(wǎng)站，以此來學(xué)習(xí)dva框架的使用。寫的不好的地方還請(qǐng)多多包涵，大家一起學(xué)習(xí)。
1.搭建工程 安裝 dva-cli$ npm install dva-cli -g $ dva -v dva-cli version 0.9.1創(chuàng)建新應(yīng)用
$ dva new cnode
然后我們 cd 進(jìn)入 cnode 目錄，并啟動(dòng)開發(fā)服務(wù)器：
$ cd cnode $ npm start
幾秒鐘后，你會(huì)看到以下輸出：
Compiled successfully! The app is running at: http://localhost:8000/ Note that the development build is not optimized. To create a production build, use npm run build.
這樣我們的cnode的應(yīng)用就創(chuàng)建好了
mock 產(chǎn)生假數(shù)據(jù)
node_modules 項(xiàng)目依賴的第三方庫(kù)
public 放單頁(yè)面模板文件，相當(dāng)于訪問的首頁(yè)面
src 開發(fā)目錄
src/assets 靜態(tài)資源文件
src/components 公共組件
src/models 每個(gè)業(yè)務(wù)中處理的數(shù)據(jù)（state）
src/routes 路由對(duì)應(yīng)的頁(yè)面
src/services 業(yè)務(wù)邏輯處理
utils 工具類
3.修改首頁(yè)現(xiàn)在我們要換掉歡迎頁(yè)，去做我們自己的布局
打開routes/IndexPage.js 修改代碼import React from "react";
import { connect } from "dva";
function IndexPage() {
return (
Hello, this is cnode web site
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
刪除routes/IndexPage.css
運(yùn)行命令
npm start4.加入antd ui庫(kù)
通過 npm 安裝?antd?詳見?repo和?babel-plugin-import?。babel-plugin-import?是用來按需加載 antd 的腳本和樣式的，詳見?repo
$ npm install antd babel-plugin-import --save
編輯 .webpackrc，使 babel-plugin-import 插件生效。
{
"extraBabelPlugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
5.使用antd創(chuàng)建頭部公共組件
在components下創(chuàng)建Header.js
import React from "react";
import { Menu, Icon, Input } from "antd";
import PropTypes from "prop-types";
const Search = Input.Search;
const Header = ({dispatch,keys}) => {
function handleClick(e) {
console.log(e.key)
}
return (
);
};
Header.propTypes = {
keys: PropTypes.array.isRequired
};
export default Header;
在routes/IndexPage.js中使用公共組件
import React from "react";
import { connect } from "dva";
import Header from "../components/Header";
function IndexPage() {
return (
Hello, this is cnode web site
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
效果:
下節(jié)課接著搞。
歡迎關(guān)注我的公眾號(hào) mike啥都想搞，回復(fù)react免費(fèi)領(lǐng)取視頻教程。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100125.html
摘要：完成詳情頁(yè)渲染，用到了來渲染先看效果在下新建數(shù)據(jù)正在加載中發(fā)布于作者次瀏覽來自分享個(gè)回復(fù)用到了中的一些組件，可以自己去官網(wǎng)參考下怎么用。里面定義了一些樣式，主要解決渲染后里面的圖片太寬，重新設(shè)置寬度。 完成詳情頁(yè)渲染，用到了react-markdown來渲染先看效果： showImg(https://segmentfault.com/img/bVbljJC?w=1569&h=909);...
摘要：異步最佳實(shí)踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫(kù)集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個(gè)最佳實(shí)踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...
摘要：知乎日?qǐng)?bào)代理首先感謝提供的分析使用詳情請(qǐng)參考他提供的參數(shù)和地址代理轉(zhuǎn)發(fā)的使用為前綴進(jìn)入代理路由啟動(dòng)界面圖像獲取后為圖像分辨率，接受任意的格式，為任意非負(fù)整數(shù)，返回值均相同返回值示例最新消息等具體參考提供的分析中的使用方式以及參數(shù)含義。 項(xiàng)目說明 這是一個(gè)基于express的node后端API服務(wù)，當(dāng)時(shí)只是想抓取字幕組網(wǎng)站的下載資源，以備以后通過nas的方式去自動(dòng)下載關(guān)注的美劇。不過后來...
閱讀 3018·2021-11-23 09:51
閱讀 3622·2021-10-13 09:39
閱讀 2507·2021-09-22 15:06
閱讀 889·2019-08-30 15:55
閱讀 3159·2019-08-30 15:44
閱讀 1791·2019-08-30 14:05
閱讀 3447·2019-08-29 15:24
閱讀 2372·2019-08-29 12:44
