2. 程式人生 > >使用create-react-app快速開發React應用

使用create-react-app快速開發React應用

阿新 • • 發佈：2019-01-15
React是一個JavaScript語言的工具庫，在這個JavaScript工具鋪天蓋地的時代，沒有意外，首先需要安裝Node.js和npm，React本身並不依賴Node.js，但是我們開發中用到的諸多工具需要Node.js的支援。在Node.js的官網（https://nodejs.org/）可以找到合適的安裝方式，安裝Node.js的同時也就安裝了npm，npm是Node.js的安裝包管理工具，因為我們不可能自己開發所有功能，會大量使用現有的安裝包，就需要npm的幫助。React技術依賴於一個很龐大的技術棧，比如，轉譯JavaScript程式碼需要使用Babel，模組打包工具又要使用Webpack，定製build過程需要grunt或者gulp。。這些技術棧都需要各自的配置檔案，還沒有開始寫一行React相關程式碼，開發人員就已經被各種技術名詞淹沒。
慶幸的是Facebook提供了一個快速開發React應用的工具，名叫create-react-appcreate-react-app是一個通過npm釋出的安裝包，在確認Node.js和npm安裝好之後，命令列中執行以下命令進行安裝：npm install --global create-react-app安裝完之後，你的電腦中就會有一個create-react-app的執行命令。接下來我們可以在任意一個想要建立專案的目錄下通過cmd命令列建立第一個react專案，只需執行以下命令create-react-app 20180420react這個命令會在當前目錄下建立一個名為20180420react的目錄，在這個目錄中會自動新增一個應用的框架，隨後我們只需要在這個框架的基礎上修改檔案就可以開發React應用，避免了大量的手工配置工作。
在create-react-app命令一大段文字輸出之後，根據提示，輸入下面的命令：cd 20180420reactnpm start這個命令會啟動一個開發模式的伺服器，同時也會讓你的瀏覽器自動開啟一個網頁，指向本地地址http://localhost:3000/，顯示介面如下所示：我們可以通過修改src/App.js檔案來修改網頁內容：恭喜你，你的第一個React應用就誕生了~接下來繼續探索React的神奇世界吧，你會發現越來越有趣~

相關推薦

使用create-react-app快速開發React應用

React是一個JavaScript語言的工具庫，在這個JavaScript工具鋪天蓋地的時代，沒有意外，首先需要安裝Node.js和npm，React本身並不依賴Node.js，但是我們開

window使用 create-react-app 快速構建 React 開發環境

1.需要先安裝node,下載連結 https://nodejs.org/en/ ，下載完成後直接安裝就可以了，下載lts版本就行（current是最新版），安裝完成後開啟命令列檢視安裝的版本 C:\U

create-react-app如何開發多頁應用

用構建工具create-react-app初始化的專案預設是單頁應用，即整個專案只有一個入口檔案和出口檔案。但是在實際工作中，由於業務的需求，需要多頁面應用，這裡記錄一下如何修改create-react-app的預設配置來滿足多頁應用的開發。 1、在專案下執行yarn run eject(npm

使用 dva + antd 快速開發react應用

pan dem webpack mount api setup require install state 使用 dva + antd 快速開發react應用 版本說明： 註意：dva的版本是0.9.2 $ node -v v10.2.1 $ npm -v 5.6.0

Create React App 快速腳手架

開發React應用時，很少有人直接引入react的源JS檔案，然後再開發。大家都是用webpack + es6來結合react開發前端應用。而webpack的使用又比較繁瑣，為此官方提供了用於快速構建開發環境的腳手架工具Create React App。該腳手

React Native快速開發APP 開源專案：廁所在哪

緣起 對於開發者來說，開發一款App，涉及到的條件還是蠻多的。比如需要服務介面、需要後臺編輯系統、需要運營工具等。因此，該案例藉助了高德開放平臺的免費資源、七牛的免費圖片儲存、微信公眾號的文章編輯系統、阿里雲服務部署等。這一切，對於開發一款小型的App已經足夠。如果能

create-react-app創建react項目，使用axios跨域

資源 使用 ios https 問題 use 圖片 圖表 json 最近用react做項目練手，項目中調用接口有跨域問題，引用的插件是axios，react項目是用 create-react-app創建的，解決跨域問題可以後臺設置cros(跨域資源共享)，如果前端解

create-react-app如何建立react專案？

我們經常在網上看react視訊，總是用在src中引入react.js，但真實的專案確不是如此，它需要一個合適的腳手架，我這裡推薦一款腳手架，叫做create-react-app的腳手架，感覺還可以，下面我介紹它的安裝和除錯過程

使用creat-react-app快速新建一個react專案

Facebook 官方推出Create-React-App腳手架，基本可以零配置搭建基於webpack的React開發環境，內建了熱更新等功能。由於create-react-app命令預先安裝和配置了webpack和babel，同時也初始化了npm（可以通過npm init來

在create-react-app建立的react專案中使用stylus

前段時間接觸到了stylus,它是一款css前處理器,感覺用起來蠻順手的,初次接觸react,我想用styl檔案編寫css,所以就找了找資料.有需要可以參考!!!1. 把配置檔案暴露出來cnpm run eject2. 修改開發環境的配置檔案路徑:    /config/we

APP快速開發：PC、移動端多項目整合，learun讓開發更暢快

進行 mysql 標準 mvc 解決 說了 配置 功能 整合 以前我們針對快速開發框架的PC模式進行過詳細的探討，了解到一套合適的快速開發框架對一個企業的重要性，今天我們繼續以learun框架為基礎藍本，探討一下其在APP快速開發中的作用。 learun技術支撐 (1)前臺

快速開發跨平臺應用之Xamarin技術

  Xamarin 介紹 　　Xamarin 是一個允許開發人員有效建立可跨 iOS、Android、Windows 應用程式的開發工具集。Xamarin是免費且開源的，遵循 MIT (麻省理工學院許可證)協議，在github上的地址為：https://github.com/x

Android APP 快速開發教程（安卓）

Android APP 快速開發教程（安卓） 前言 本篇部落格從開發的角度來介紹如何開發一個Android App，需要說明一點是，這裡只是提供一個如何開發一個app的思路，並不會介紹很多技術上的細節，從整個大局去把握如何去構思一個app的開發，讓你對獨立開發一款app的時候有個理解

是時候開始用C 快速開發移動應用了

                                                                                                    從2015年接觸Xamarin到至今已經2個年頭，我對Xamarin的技能沒有長進多少，但它卻已經足夠成熟到在

想快速開發快應用？你需要知道這5大神器

快應用，是包括華為、小米、OPPO、VIVO等10家中國手機廠商共同推出的新一代應用生態。 去年微信小程式日活從0增長到1.7億，抓住這撥紅利的創業者都拿到了各種高估值融資。 除了微信和9家聯盟，包括百度在內的所有巨頭今年都會推出自己的動態App平臺，整體動態App市場的日活預計增長到4億。

使用Flask快速開發WEB應用-第二篇:Blueprint模組的應用

轉自：http://www.easywu.com/?p=306 看了之後可以對Blueprint的用法和程式的框架有所瞭解。 一個網站根據不同的功能可能會分為多個不同的模組，如果把所有功能都寫在一個檔案裡，後期將會很難維護。上一篇裡面講到了怎樣構建一個最小的Flask

基於Django快速開發Web 應用

      專案建立好後，就可以繼續在命令提示符下將當前路徑轉換為C:\mywebapp，然後執行命令manage.pystartappmessageboard 建立一個名為messageboard的新應用，該命令執行後會在C:\mywebapp 下生成應用資料夾messageboard，並在此資料夾下建立三

如何快速開發SPA應用

前言 web早已經進入了2.0時代了，如今的網頁大有往系統應用級別的方向發展的趨勢，再也不是以前的簡單展示資訊的介面了。如今很多webapp已經做到了原生應用的功能，並且運用自身的優勢逐步取代之。HTML5也很給力，對多平臺，多螢幕裝置的良好相容性使得前端工程師們在各種平臺上大顯身手。滷煮兩年前進公司接到的

Node實戰（第2季）5 基於Koa快速開發Web應用

   講解ES6中生成器、yield，以及Node.js下一代Web開發框架--Koa及其中介軟體的用法。 5.1 ES6時代的來臨    ECMAScript6，簡稱ES6，也稱作ECMAScript2015，於2015年6月正式定稿。ES6是一次重大升級，是自2009年

快速開發android應用6-實現scrollview和recyclerview同方向滑動

概述 本次快速開發Android應用系列，是基於課工場的公開課高效Android工程師6周培養計劃，記錄微服私訪APP的整個開發過程以及當中碰到的問題，供日後學習參考。 上一篇我們主要實現通過picasso獲取伺服器圖片，並通過輪播圖的形式展現以及實現個