【全棧React】第12天: 創(chuàng)建React應用

solocoder 發(fā)布于2019-08-20 18:33 / 2547人閱讀

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

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3822
原文：https://www.fullstackreact.com/30-days-of-react/day-12/

今天，我們將添加一個構(gòu)建過程來存儲常見的構(gòu)建操作，以便我們可以輕松地開發(fā)和部署我們的應用。

React小組注意到運行一個React應用需要很多配置（并且社區(qū)幫助臃腫 - 包括我們也是如此）。幸運的是，React團隊/社區(qū)中的一些聰明人員聚集在一起，構(gòu)建/發(fā)布了一個官方的生成器應用，使其更容易上手并快速運行。

創(chuàng)建React應用

通過Facebook發(fā)布的create-react-app項目可幫助我們快速啟動并運行我們系統(tǒng)上的React應用，無需自定義配置我們的一部分

該軟件包作為Node軟件包發(fā)布，可以使用npm進行安裝。


nvm 和 n的一個插件
如果您的系統(tǒng)上尚未安裝該節(jié)點，Node主頁有如何安裝node的簡單文檔。
我們建議使用nvm或n版本管理工具。這些工具使您可以隨時在系統(tǒng)上安裝/使用多個版本的節(jié)點變得非常簡單。

在我們的系統(tǒng)上安裝了 node 后，我們可以安裝create-react-app包：

`npm install --global create-react-app`

使用全局方式安裝的create-react-app ，我們可以在終端的任何地方使用create-react-app 命令。

我們創(chuàng)建一個我們稱之為30days的新應用，使用我們剛剛安裝的 create-react-app 命令。在要創(chuàng)建應用的目錄中打開終端窗口。

在終端中，我們可以使用該命令創(chuàng)建一個新的React應用，并為要創(chuàng)建的應用添加一個名稱。

create-react-app 30days && cd 30days

讓我們在瀏覽器中啟動我們的應用。create-react-app 軟件包附帶了一些為我們創(chuàng)建的內(nèi)置腳本（在 package.json 文件中）。我們可以使用npm start命令_start_使用內(nèi)置的網(wǎng)絡服務器編輯我們的應用：

npm start

該命令將在Chrome中打開一個窗口，使其在我們應用中運行默認url：http://localhost:3000/。

我們來編輯新創(chuàng)建的應用。看看它創(chuàng)建的目錄結(jié)構(gòu)，我們將看到我們有一個運行public/index.html 的基本節(jié)點應用，以及構(gòu)成我們正在運行的應用的src/ 目錄中的幾個文件。

我們打開 src/App.js 文件，我們將看到我們有一個非?；镜慕M件，應該都很熟悉。它有一個簡單的渲染功能，它返回我們在Chrome窗口中看到的結(jié)果。

index.html文件有一個 #root的

節(jié)點，這個應用本身將被自動掛載（這是在src/index.js文件中處理的）。任何時候，我們要添加webfonts，樣式，標簽等，我們可以將它們加載到index.html文件中。

Shipping（運輸）

我們將在幾周內(nèi)進行部署，但暫時知道生成器創(chuàng)建了一個構(gòu)建命令，因此我們可以創(chuàng)建我們的應用的最小化，優(yōu)化版本，我們可以將其上傳到服務器。

我們可以使用我們項目根目錄下的npm run build 命令構(gòu)建我們的應用：

`npm run build`

因此，我們現(xiàn)在有一個實時重新加載的單頁應用（SPA）可以開發(fā)。明天，我們將使用這個新的應用程序, 我們構(gòu)建在運行時呈現(xiàn)多個組件

GPU云服務器云服務器 react _React React 源碼 react cdn

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

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

【全棧React】React 30天教程索引

摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第11天: 純組件

摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。為了獲得更多的性能和簡單性，同樣允許我們使用正常的函數(shù)創(chuàng)建純粹的，無狀態(tài)的組件。在中，功能組件被稱為一個參數(shù)的類似于構(gòu)造函數(shù)類，它們是它所調(diào)用的，以及組件樹的當前。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...

Cciradih 2019-08-20 18:33 評論0 收藏0
【全棧React】第13天: 重復元素

摘要：在我們的應用中添加太多的復雜度來加載外部數(shù)據(jù)之前今天我們將快速了解如何在應用中重復組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時需要更新的元素的數(shù)量。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

RaoMeng 2019-08-20 18:33 評論0 收藏0
【全棧React】第6天: 狀態(tài)

摘要：無論何時狀態(tài)改變通過，組件將重新投遞。在調(diào)用函數(shù)之后，我們可以將第二個參數(shù)傳遞給函數(shù)，該函數(shù)將在狀態(tài)更新后保證被調(diào)用。今天，我們更新了我們的組件以使其處于狀態(tài)狀態(tài)，現(xiàn)在有必要處理如何使組件成為狀態(tài)。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...

leo108 2019-08-20 18:29 評論0 收藏0
【全棧React】第2天: 什么是 JSX?

摘要：代表基本上是常規(guī)。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉(zhuǎn)換為。在組件的情況下，寫入的將如下所示在我們在第一個作出反應組件使用的語法是語法。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

Eirunye 2019-08-20 18:29 評論0 收藏0