用create-react-app來快速配置react

来源:https://www.cnblogs.com/maskmtj/archive/2018/04/20/8888840.html
-Advertisement-
Play Games

最近在學react,然後感覺自己之前用的express+gulp+webpack+ejs的工作環境還是基於html+js+css這種三層架構的應用,完全跟react不是一回事。 愚蠢的我居然在原先的這個環境上又搭建了react的環境。好吧,寫是能寫,但是作為服務端的架構就顯得驢唇不對馬嘴。不免對環境 ...


最近在學react,然後感覺自己之前用的express+gulp+webpack+ejs的工作環境還是基於html+js+css這種三層架構的應用,完全跟react不是一回事。

愚蠢的我居然在原先的這個環境上又搭建了react的環境。好吧,寫是能寫,但是作為服務端的架構就顯得驢唇不對馬嘴。不免對環境的配置感到迷茫。我也知道redux,但是才剛學react,react還沒熟,暫時還不想瞭解那個框架,然後我發現了create-react-app。

可以用這個直接為自己搭建腳手架,方便的eb,這裡記錄一下

首先安裝這個包

npm install -g create-react-app

然後就跟用express “appname”一樣,鍵入

create-react-app appname

來創建新的項目。比如我創建的名為“react-learn-1”的項目目錄如下。

其中之前習慣放在根目錄下的webpack構建配置文件被放在了node_modules下的react-scripts中。好像是因為覺得構建配置文件都大同小異,於是就直接藏起來了,到時候有一些小需求的時候可以去改。

創建成功之後它會告訴你怎麼啟動項目

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

ok,就這麼簡單


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 工作中要用到.在github上找的大部分都是豎屏滾動沒辦法只能自己手動寫. 本來只是想隨便實現一下的,結果一時興起把它弄成了一個簡單的小插件,開了個github倉庫(希望路過點個星) "JS橫屏滾動插件" 因為我自己就是用戶,儘量簡化了用戶要做的操作.現在使用起來像是這個樣子 思路 1. 公告 ...
  • 在這一篇文章中,我們從源碼的角度再次理解下 setState 的更新機制,供深入研究學習之用。 在上一篇手記「 "深入理解 React JS 中的 setState" 」中,我們簡單地理解了 React 中 setState “詭異”表現的原因。 源碼的部分為了保證格式顯示正常就截圖了,查看源碼點擊 ...
  • 本文分享並演示了在 Ionic 3 框架中如何進行模塊的延遲載入(Lazy Load)開發。 本文分享並演示了在 Ionic 3 框架中如何進行模塊的延遲載入(Lazy Load)開發。 在我的實戰課程 "「快速上手Ionic3 多平臺開發企業級問答社區」" 中,因為開發的仿知乎 App 模塊間的加 ...
  • 在項目中我們經常能碰見然圖片垂直水平居中,不定寬高的div垂直水平居中,等等~~ 現在我將介紹我所知道的幾種用css來解決的幾種方案。 1.父元素text-align:center;display:table-cell;vertical-align:middle;子元素display:inline- ...
  • 在一些情況下,我們可能會需要對一個 prop (父子組件傳遞數據的屬性) 進行“雙向綁定”。 在vue 1.x 中的 .sync 修飾符所提供的功能。當一個子組件改變了一個帶 .sync 的prop的值時,這個變化也會同步到父組件中所綁定的值。 這很方便,但也會導致問題,因為它破壞了單向數據流。(數 ...
  • react 的 antd框架中 form使用需註意: 1、不能用state改變下拉框、輸入框等組件的值,因為 經過 getFieldDecorator 包裝的控制項,表單控制項會自動添加 value(或 valuePropName 指定的其他屬性) onChange(或 trigger 指定的其他屬性) ...
  • 參考書《ECMAScript 6入門》http://es6.ruanyifeng.com/Reflect1.概述:Object對象的內部方法都能在Reflect中找到,同時Reflect將Object的一些命令改成了函數操作,且Reflect與Proxy一一對應。2.靜態方法Object,Refle ...
  • 邏輯理解:當程式執行setTimeout()和setInterval()時,會讓這兩者到後臺(我的理解,事實是否如此,有待驗證)運行計時,當時間到了之後,將回調函數按照順序依次排在當前正在執行的函數隊列尾部。哪怕延遲為0也一樣,當前正在執行解析的Javascript解析器並不會立即執行定時器的回調函 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...