React 項目初始化

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

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

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

npm install -g create-react-app

2.構(gòu)建項目

create-react-app ProjectName

3.安裝redux

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

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

5.安裝連接 react-redux
npm install react-redux --save
React-redux 提供 Provider和connect 兩個接口來連接
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的使用變得簡潔

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95093.html

相關(guān)文章

打造前端團隊的 React CLI 工具

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

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

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

Betta 2019-08-20 18:30 評論0 收藏0
從 1 到完美，用 js 和 react-native 寫一個 APP

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

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

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

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

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

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

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

MorePainMoreGain 2019-08-02 15:58 評論0 收藏0