目錄
配置了瀏覽器熱載入的功能;
首頁 web前端 html教學 詳解React 快速上手腳手架 create-react-app

詳解React 快速上手腳手架 create-react-app

Jun 24, 2017 pm 01:57 PM
react 好的 官方 快速 鷹架

1. React 快速上手腳手架create-react-app

為了快速地進行構建使用React 的項目,FaceBook 官方發布了一個無需配置的、用於快速建置開發環境的鷹架工具create-react-app。
當然,如果你需要React Native 的腳手架項目,可以查看這裡:create-react-native-app

使用的原因以及特性:

  • 無需配置;

  • 整合了對React, JSX, ES6 和Flow 的支援;

整合了開發伺服器;

詳解React 快速上手腳手架 create-react-app

配置了瀏覽器熱載入的功能;

在JavaScript 中可以直接import CSS 和圖片;

詳解React 快速上手腳手架 create-react-app

自動處理CSS 的兼容問題,無需添加

-webkit詳解React 快速上手腳手架 create-react-app 前綴;

詳解React 快速上手腳手架 create-react-app

整合好了編譯命令,編譯後直接發布成產品,並且還包含了sourcemaps。

詳解React 快速上手腳手架 create-react-app

2. create-react-app 的安裝

命令列中使用npm 執行安裝命令
    npm install - g create-react-app
  • ,注意需要新增g 參數進行全域安裝以及權限的問題。

  • #已安裝後執行執行指令

    npm start
  • 即可在瀏覽器看到運行後的結果,並且已經實現了熱加載的功能。
  • 3. 要注意的幾個點
  • #Node 的版本必須>= 4,推薦Node >= 6 and npm >= 3;
######運行起來後瀏覽器已經實現了熱加載刷新,修改代碼保存後瀏覽器會自動刷新;######### ###執行###npm test 或yarn test### 可以執行測試動作,更多請參考這裡;############編譯專案執行###npm run build 或yarn build ###;############更多使用精靈請外掛這裡。 ##########

以上是詳解React 快速上手腳手架 create-react-app的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

理解SpringBoot和SpringMVC之間的差異及比較 理解SpringBoot和SpringMVC之間的差異及比較 Dec 29, 2023 am 09:20 AM

對比SpringBoot與SpringMVC,了解它們的差異隨著Java開發的不斷發展,Spring框架已經成為了許多開發人員和企業的首選。在Spring的生態系中,SpringBoot和SpringMVC是兩個非常重要的組件。雖然它們都是基於Spring框架的,但在功能和使用方式上卻有一些區別。本文將聚焦在SpringBoot與Sprin

PHP、Vue和React:如何選擇最適合的前端框架? PHP、Vue和React:如何選擇最適合的前端框架? Mar 15, 2024 pm 05:48 PM

PHP、Vue和React:如何選擇最適合的前端框架?隨著互聯網技術的不斷發展,前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架,每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時,開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使

Win11系統中「我的電腦」路徑有何不同?快速找方法! Win11系統中「我的電腦」路徑有何不同?快速找方法! Mar 29, 2024 pm 12:33 PM

Win11系統中「我的電腦」路徑有何不同?快速找方法!隨著Windows系統的不斷更新,最新的Windows11系統也帶來了一些新的變化和功能。其中一個常見的問題是使用者在Win11系統中找不到「我的電腦」的路徑,這在先前的Windows系統中通常是很簡單的操作。本文將介紹Win11系統中「我的電腦」的路徑有何不同,以及快速尋找的方法。在Windows1

Java框架與前端React框架的整合 Java框架與前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架與React框架的整合:步驟:設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例(SpringBoot+React):Java程式碼:定義RESTfulAPI控制器。 React程式碼:取得並顯示API回傳的資料。

WordPress 網站建立指南:快速建立個人網站 WordPress 網站建立指南:快速建立個人網站 Mar 04, 2024 pm 04:39 PM

WordPress網站建立指南:快速建立個人網站隨著數位時代的到來,擁有一個個人網站已經成為了一種時尚和必要。而WordPress作為最受歡迎的網站建立工具,讓建立個人網站變得更容易、更方便。本文將為大家提供一個快速建立個人網站的指南,包含具體的程式碼範例,希望可以幫助到想要擁有自己網站的朋友們。第一步:購買網域和主機在開始建立個人網站之前,首先要購買自己

前端開發中sessionStorage的優點及應用案例分析 前端開發中sessionStorage的優點及應用案例分析 Jan 11, 2024 pm 02:51 PM

sessionStorage在前端開發的優點與應用案例分析隨著Web應用的發展,前端開發的需求也越來越多元。前端開發人員需要使用各種工具和技術來提高使用者體驗,其中,sessionStorage是一個非常有用的工具。本文將介紹sessionStorage在前端開發的優勢,以及幾個具體的應用案例。 sessionStorage是HTML5提供的一種本機儲存方

分享PyCharm中快速註解程式碼的技巧,提高工作效率 分享PyCharm中快速註解程式碼的技巧,提高工作效率 Jan 04, 2024 pm 12:02 PM

效率提升! PyCharm中快速註解程式碼的方法分享在日常的軟體開發工作中,我們經常需要註解掉一部分程式碼進行偵錯或調整。如果手動逐行添加註釋,這無疑會增加我們的工作量和耗費時間。而PyCharm作為一款強大的Python整合開發環境,提供了快速註解程式碼的功能,大大提升了我們的開發效率。本文將分享一些在PyCharm中快速註解程式碼的方法,並提供具體的程式碼範例。單

vue.js vs.反應:特定於項目的考慮因素 vue.js vs.反應:特定於項目的考慮因素 Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代,React適用於大型複雜應用。 1)Vue.js易於上手,適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富,適合有高性能需求和復雜功能需求的項目。

See all articles