使用create-react-app 創(chuàng)建react項(xiàng)目

zxhaaa 發(fā)布于2019-08-22 13:52 / 999人閱讀

摘要：官方的命令行工具根據(jù)官方文檔介紹是開始構(gòu)建新的單頁面應(yīng)用的最佳途徑。它可以幫你配置開發(fā)環(huán)境，以便你可以使用最新的特性，還能提供很棒的開發(fā)體驗(yàn)，并為生產(chǎn)環(huán)境優(yōu)化你的應(yīng)用。

create-react-app: Facebook官方的命令行工具

根據(jù)官方文檔介紹：
Create React App 是開始構(gòu)建新的 React 單頁面應(yīng)用的最佳途徑。它可以幫你配置開發(fā)環(huán)境，以便你可以使用最新的 JavaScript 特性，還能提供很棒的開發(fā)體驗(yàn)，并為生產(chǎn)環(huán)境優(yōu)化你的應(yīng)用。

安裝Create React App

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

執(zhí)行完以上命令之后，你的終端會輸出如下，并自動打開瀏覽器 http://localhost:3000

目錄結(jié)構(gòu)

my-app/
  README.md
  node_modules/
  package.json
  publish/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    registerServiceWorker.js

當(dāng)你準(zhǔn)備好構(gòu)建生產(chǎn)環(huán)境時(shí)，運(yùn)行 npm run build 將會在 build 文件夾中創(chuàng)建一個優(yōu)化好的應(yīng)用。

問題來了：通過 npm run build 打包應(yīng)用過后打開應(yīng)用會發(fā)現(xiàn)頁面報(bào)錯了，如圖：

打開打包過后的index.html，如圖：

所有引用資源的地址都是訪問的根目錄，所以導(dǎo)致頁面訪問不到

解決方案：
在package.json中加入"homepage" : ".",

再次運(yùn)行 npm run build 就打包完成了，頁面可以正常訪問。

云服務(wù)器 GPU云服務(wù)器 create-react-app 怎么部署react項(xiàng)目 react使用webrtc VS2013項(xiàng)目創(chuàng)建

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

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

相關(guān)文章

深度解析`create-react-app`源碼

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

waruqi 2019-08-22 13:59 評論0 收藏0
前端基礎(chǔ)進(jìn)階（十五）：詳解 ES6 Modules

摘要：下載地址安裝一個好用的命令行工具在環(huán)境下，系統(tǒng)默認(rèn)的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎(chǔ)進(jìn)階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

Lowky 2019-08-21 18:31 評論0 收藏0
create-react-app項(xiàng)目部署到Github Pages

摘要：描述本文講解使用創(chuàng)建的項(xiàng)目，如何部署，以及這部署到過程中遇到到坑。增加命令，推送加上這一句推送項(xiàng)目只是部署項(xiàng)目，代碼直接放上去是識別不了的，所以部署的是打包編譯后到代碼。描述本文講解使用create-react-app創(chuàng)建的項(xiàng)目，如何部署GitHub Pages，以及這部署到過程中遇到到坑。創(chuàng)建項(xiàng)目使用官網(wǎng)方式創(chuàng)建項(xiàng)目。 npx create-react-app my-app ...

levy9527 2019-08-26 13:55 評論0 收藏0
create-react-app 源碼學(xué)習(xí)（上）

摘要：這里通過調(diào)用方法方法主要是通過來通過命令執(zhí)行下的方法。原文地址Nealyang/personalBlog 前言對于前端工程構(gòu)建，很多公司、BU 都有自己的一套構(gòu)建體系,比如我們正在使用的 def，或者 vue-cli 或者 create-react-app，由于筆者最近一直想搭建一個個人網(wǎng)站，秉持著呼吸不停，折騰不止的原則，編碼的過程中，還是不想太過于枯燥。在 coding 之前...

MkkHou 2019-08-23 18:12 評論0 收藏0
【全棧React】第12天: 創(chuàng)建React應(yīng)用

摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將添加一個構(gòu)建過程來存儲常見的構(gòu)建操作，以便我們可以輕松地開發(fā)和部署我們的應(yīng)用。在要創(chuàng)建應(yīng)用的目錄中打開終端窗口。文件有一個的節(jié)點(diǎn)，這個應(yīng)用本身將被自動掛載這是在文件中處理的。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...

solocoder 2019-08-20 18:33 評論0 收藏0