使用create-react-app 創建react項目

zxhaaa 發布于2019-08-22 13:52 / 975人閱讀

摘要：官方的命令行工具根據官方文檔介紹是開始構建新的單頁面應用的最佳途徑。它可以幫你配置開發環境，以便你可以使用最新的特性，還能提供很棒的開發體驗，并為生產環境優化你的應用。

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

根據官方文檔介紹：
Create React App 是開始構建新的 React 單頁面應用的最佳途徑。它可以幫你配置開發環境，以便你可以使用最新的 JavaScript 特性，還能提供很棒的開發體驗，并為生產環境優化你的應用。

安裝Create React App

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

cd my-app
npm start

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

目錄結構

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

當你準備好構建生產環境時，運行 npm run build 將會在 build 文件夾中創建一個優化好的應用。

問題來了：通過 npm run build 打包應用過后打開應用會發現頁面報錯了，如圖：

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

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

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

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

云服務器 GPU云服務器 create-react-app 怎么部署react項目 react使用webrtc VS2013項目創建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92553.html

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

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

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

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

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

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

levy9527 2019-08-26 13:55 評論0 收藏0
create-react-app 源碼學習（上）

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

MkkHou 2019-08-23 18:12 評論0 收藏0
【全棧React】第12天: 創建React應用

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

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