初試React(基于homebrew1.8.6、node11.6.0、npm6.5.0、cnpm6.0.0)

一、開(kāi)發(fā)環(huán)境搭建

1、更新brew

    命令:
    brew update
    解釋?zhuān)?    更新brew的所有本地包

2、安裝/更新node

    命令:
    brew install node
    brew upgrade node
    解釋?zhuān)?    安裝node
    更新node

3、安裝cnpm

    命令:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    解釋?zhuān)?    npm install[安裝命令] -g[全局安裝參數(shù)] cnpm[cnpm包名稱(chēng)] --registry[指定cnpm軟件包源] = https://registry.npm.taobao.org[cnpm軟件包源地址]

4、安裝webpack

    命令
    cnpm install webpack
    解釋?zhuān)?    cnpm install[安裝命令] webpack[軟件包名]

5、安裝create-react-app

    命令:
    cnpm install create-react-app
    解釋?zhuān)?    cnpm install[安裝命令] create-react-app[軟件包名]

6、安裝babel-loader

    命令:
    cnpm install babel-loader@8.0.4
    解釋?zhuān)?    cnpm install[安裝命令] babel-loader@8.0.4 [軟件包名@版本號(hào)](版本號(hào)為可選參數(shù),不添加則自動(dòng)下載最新版本)

7、安裝react

    命令:
    cnpm install react
    解釋?zhuān)?    cnpm install [安裝命令] react[軟件包名]

8、安裝react-dom

    命令:
    cnpm install react-dom
    解釋?zhuān)?    cnpm install[安裝命令] react-dom[軟件包名]

二、創(chuàng)建第一個(gè)react工程

1、創(chuàng)建基礎(chǔ)工程

    命令:
    create-react-app helloworld
    解釋?zhuān)?    使用create-react-app創(chuàng)建一個(gè)名為helloworld的工程目錄

2、拿出一包咖啡泡上

    命令:
    別放糖,少放奶
    解釋?zhuān)?    解釋?zhuān)拷忉屖裁矗繒?huì)下載很多東西,喝杯咖啡等著就行了

3、沒(méi)了

三、運(yùn)行helloworld

1、進(jìn)入helloworld工程目錄,啟動(dòng)工程

    命令:
    cd helloworld
    npm start
    解釋?zhuān)?    進(jìn)入helloworld工程目錄
    啟動(dòng)工程

2、查看運(yùn)行效果

    瀏覽器輸入http://localhost:3000
    若正常啟動(dòng)瀏覽器將顯示一個(gè)react頁(yè)面

四、坑

1、Q:npm start執(zhí)行失敗,日志如下

  [@Freedoms:helloworld (master)]$ npm start
  > helloworld@0.1.0 start /Users/freedoms/work/react/helloworld
  > react-scripts start
  There might be a problem with the project dependency tree.
  It is likely not a bug in Create React App, but something you need to fix locally.
  The react-scripts package provided by Create React App requires a dependency:
    "babel-loader": "8.0.4"
  Don't try to install it manually: your package manager does it automatically.
  However, a different version of babel-loader was detected higher up in the tree:
    /Users/freedoms/work/react/helloworld/node_modules/babel-loader (version: 8.0.5)
  Manually installing incompatible versions is known to cause hard-to-debug issues.
  If you would prefer to ignore this check, add
  SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
  That will permanently disable this message but you might encounter other issues.
  To fix the dependency tree, try following the steps below in the exact order:
    1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
    2. Delete node_modules in your project folder.
    3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
    4. Run npm install or yarn, depending on the package manager you use.
    In most cases, this should be enough to fix the problem.
    If this has not helped, there are a few other things you can try:
    5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
    This may help because npm has known issues with package hoisting which may get resolved in future versions.
    6. Check if /Users/freedoms/work/react/helloworld/node_modules/babel-loader is outside your project directory.
    For example, you might have accidentally installed something in your home folder.
    7. Try running npm ls babel-loader in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
  If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
  That would permanently disable this preflight check in case you want to proceed anyway.
  P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! helloworld@0.1.0 start: `react-scripts start`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the helloworld@0.1.0 start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /Users/freedoms/.npm/_logs/2019-01-21T16_16_39_054Z-debug.log
A:解決辦法
  1、卸載babel-loader
  2、指定安裝babel-loader版本8.0.4
  3、重新執(zhí)行npm start
  4、坑已填好

五、參考

1、淘寶npm鏡像 http://npm.taobao.org/
2、React 中文文檔 https://react.docschina.org/
3、React China http://react-china.org/
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1 Webpack 1.1 概念簡(jiǎn)介 1.1.1 WebPack是什么 1、一個(gè)打包工具 2、一個(gè)模塊加載工具 3...
    Kevin_Junbaozi閱讀 6,726評(píng)論 0 16
  • 寫(xiě)在前面的話(huà) 閱讀本文之前,先看下面這個(gè)webpack的配置文件,如果每一項(xiàng)你都懂,那本文能帶給你的收獲也許就比較...
    不忘初心_9a16閱讀 3,259評(píng)論 0 17
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來(lái) ...
    it筱竹閱讀 11,231評(píng)論 0 21
  • 不能給你未來(lái),我還你現(xiàn)在,安靜結(jié)束也是另一種對(duì)待。再回首,那看似浪漫的劇情現(xiàn)在看來(lái)也是一場(chǎng)鬧劇,原來(lái)我們每個(gè)人都喜...
    瑾沉閱讀 825評(píng)論 0 1
  • 凌晨一點(diǎn)多時(shí)候,外邊呼呼的大風(fēng)開(kāi)始刮起來(lái),越刮越大,聽(tīng)著房屋聲音嘩啦啦,似乎屋頂都要被掀翻一樣。過(guò)了一會(huì)兒就開(kāi)始下...
    XuhongZhai閱讀 150評(píng)論 0 0