React 項(xiàng)目初始化

seasonley 發(fā)布于2019-08-22 17:21 / 639人閱讀

摘要：安裝構(gòu)建工具構(gòu)建項(xiàng)目安裝彈出配置文件可自定義配置安裝異步處理使用開(kāi)啟中間件安裝連接提供和兩個(gè)接口來(lái)連接組件在應(yīng)用最外層，傳入即可，只用一次負(fù)責(zé)從外部獲取組件所需的參數(shù)安裝裝飾器的中加入的使用變得簡(jiǎn)潔屬性方法

1.安裝構(gòu)建工具

npm install -g create-react-app

2.構(gòu)建項(xiàng)目

create-react-app ProjectName

3.安裝redux

npm install redux --save
npm run eject 彈出配置文件 可自定義配置webpack

4.安裝異步處理 redux-thunk
npm install redux-thunk --save
使用applyMiddleware開(kāi)啟 thunk中間件

5.安裝連接 react-redux
npm install react-redux --save
React-redux 提供 Provider和connect 兩個(gè)接口來(lái)連接
Provider組件在應(yīng)用最外層，傳入store即可，只用一次
Connect負(fù)責(zé)從外部獲取組件所需的參數(shù)

6.安裝裝飾器
npm install babel-plugin-transform-decorators-legacy --save-dev
package.json 的 babel 中加入

    "plugins": [  "transform-decorators-legacy" ]

connect的使用變得簡(jiǎn)潔

@connect(
    (state) => {{num: state}},                    // 屬性
    { addGun, removeGun, addGunAsync }            // 方法
)

7.React-Router 4
npm install react-router-dom --save

云服務(wù)器 GPU云服務(wù)器怎么部署react項(xiàng)目 react _React React 源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95093.html

相關(guān)文章

打造前端團(tuán)隊(duì)的 React CLI 工具

摘要：關(guān)于前端工具對(duì)于，有官方的。所以我們使用了和類(lèi)似的解決方案，創(chuàng)建自己團(tuán)隊(duì)專(zhuān)屬的前端工具，這也是我們當(dāng)前的解決方案。我推薦的方案回到文章的標(biāo)題打造前端團(tuán)隊(duì)工具，我認(rèn)為每個(gè)前端團(tuán)隊(duì)都應(yīng)該有自己的工具，這是一個(gè)團(tuán)隊(duì)技術(shù)和經(jīng)驗(yàn)沉淀的重要根據(jù)地。關(guān)于前端 CLI 工具對(duì)于 Angular，有官方的 Angular CLI。對(duì)于 Vue，有官方的 Vue CLI。對(duì)于 React，有官方...

Scott 2019-08-23 17:17 評(píng)論0 收藏0
React.js組件化開(kāi)發(fā)第一步(框架搭建)

摘要：開(kāi)始前安裝安裝安裝安裝完成后將鏡像替換成國(guó)內(nèi)的安裝查看安裝版本項(xiàng)目初始化命令行切到需要?jiǎng)?chuàng)建項(xiàng)目的目錄內(nèi)然后執(zhí)行是項(xiàng)目的名稱(chēng)也是文件夾的名稱(chēng)命令行切到剛創(chuàng)建的項(xiàng)目運(yùn)行項(xiàng)目執(zhí)行以下命令會(huì)自動(dòng)打開(kāi)瀏覽器并防問(wèn)初始化生成開(kāi)始前安裝 node.js; 安裝 cnpm; 安裝 yarn; 安裝完成yarn后, 將鏡像替換成國(guó)內(nèi)的: $ yarn config set registry h...

Betta 2019-08-20 18:30 評(píng)論0 收藏0
從 1 到完美，用 js 和 react-native 寫(xiě)一個(gè) APP

摘要：從到完美，用和寫(xiě)一個(gè)在年開(kāi)源了后，緊接著在年就又開(kāi)源了，就此打開(kāi)了用和前端技術(shù)寫(xiě)原生之路。對(duì)應(yīng)來(lái)看，程序只有兩個(gè)部分，和，而部分則分為組件和。所以，在端的純庫(kù)無(wú)在中同樣適用，如等。應(yīng)用實(shí)例便是使用開(kāi)發(fā)的一個(gè)日記。從 1 到完美，用 js 和 react-native 寫(xiě)一個(gè) APP facebook 在 2013 年開(kāi)源了 react 后，緊接著在 2015 年就又開(kāi)源了 react...

CollinPeng 2019-08-23 11:45 評(píng)論0 收藏0
深度解析`create-react-app`源碼

摘要：這個(gè)選項(xiàng)看意思就知道了，默認(rèn)使用來(lái)安裝，運(yùn)行，如果你沒(méi)有使用，你可能就需要這個(gè)配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波關(guān)于create-react-app 源碼的關(guān)鍵詞，發(fā)現(xiàn)掘金出現(xiàn)好幾篇仿文，就連我開(kāi)頭前沿瞎幾把啰嗦的話都抄，我還能說(shuō)什么是吧？以后博客還是首發(fā)在Github上，地址戳這里戳這里！！轉(zhuǎn)載求你們注明出處、改編求你們貼一下參考鏈...

waruqi 2019-08-22 13:59 評(píng)論0 收藏0
webpack工程化集成React技術(shù)棧（一）

項(xiàng)目開(kāi)始前，我們先聊一聊關(guān)于項(xiàng)目的一些說(shuō)明。該項(xiàng)目起始于2017年初，當(dāng)時(shí)公司主要技術(shù)棧為gulp+angular，鑒于react的火熱的生態(tài)，在公司決定研發(fā)bss管理系統(tǒng)時(shí)選用react開(kāi)發(fā)，目的也是為react native打下基礎(chǔ)，以解決后期公司大前端技術(shù)棧的逐步成熟。（當(dāng)時(shí)沒(méi)有選擇vue開(kāi)發(fā)的主要原因是weex生態(tài)還不夠特別成熟），既然決定換新，項(xiàng)目的構(gòu)建也跟著一起換，從gulp轉(zhuǎn)向火熱的...

tianhang 2019-08-22 14:47 評(píng)論0 收藏0
React項(xiàng)目實(shí)戰(zhàn)：react-redux-router基本原理

摘要：組件將元素作為結(jié)果返回。是把數(shù)據(jù)從項(xiàng)目傳到的有效載荷。有以下職責(zé)維持應(yīng)用的提供方法獲取提供方法更新通過(guò)注冊(cè)監(jiān)聽(tīng)器通過(guò)返回的函數(shù)注銷(xiāo)監(jiān)聽(tīng)器。系列目錄前端大統(tǒng)一時(shí)代即將來(lái)臨項(xiàng)目實(shí)戰(zhàn)環(huán)境搭建項(xiàng)目實(shí)戰(zhàn)基本原理項(xiàng)目實(shí)戰(zhàn)登錄頁(yè)面編輯中 React相關(guān) React 是一個(gè)采用聲明式，高效而且靈活的用來(lái)構(gòu)建用戶界面的框架。 JSX 本質(zhì)上來(lái)講，JSX 只是為React.createElement(co...

MorePainMoreGain 2019-08-02 15:58 評(píng)論0 收藏0