• A-Fu Design
  • 前端設計
    • jQuery 套件
    • HTML 5
  • 關於A-Fu
  • 隱私權政策
  • 聯絡A-Fu
Google+ facebook twitter

A-Fu Design

A-Fu Design

Facebook Open Source React Native



Props

大多數組件在創建時可以使用不同的參數進行自定義。 這些創建參數稱為props。

例如,一個基本的React Native組件是Image。 創建圖像時,可以使用名為source的prop來控制它顯示的圖像。


請注意,{pic}被大括號包圍,以將變量pic嵌入到JSX中。 您可以將任何JavaScript表達式放在JSX中的大括號內。

您自己的組件也可以使用道具。 這使您可以創建在應用程序的許多不同位置使用的單個組件,每個位置的屬性略有不同。 只需在渲染函數中引用this.props即可。 這是一個例子:

使用name作為prop我們可以自定義Greeting組件,因此我們可以為每個問候重用該組件。 此示例還使用JSX中的Greeting組件,就像內置組件一樣。 執行此操作的能力使得React如此酷 - 如果您發現自己希望有一組不同的UI原語可供使用,那麼您只需創建新的原語。

這裡發生的另一件新事是View組件。 View可用作其他組件的容器,以幫助控製樣式和佈局。


使用props和基本的Text,Image和View組件,您可以構建各種靜態屏幕。 要了解如何讓您的應用隨時間變化,您需要了解狀態。



Share
Tweet
Pin
Share
No 意見



Facebook Open Source React Native

學習基礎知識


React Native與React類似,但它使用本機組件而不是Web組件作為構建塊。 因此,要了解React Native應用程序的基本結構,您需要了解一些基本的React概念,如JSX,組件,狀態和props。 如果你已經知道React,你仍然需要學習一些特定於React-Native的東西,比如本機組件。 無論您是否擁有React經驗,本教程都面向所有受眾。



讓我們開始吧。

Hello World

根據我們古老傳統,我們必須首先構建一個除了說“Hello world”之外什麼都不做的應用程序。 這裡是:
如果您感到好奇,可以直接在Web模擬器中使用示例代碼。您還可以將其粘貼到App.js文件中,以在本地計算機上創建真正的應用程序。

這裡發生了什麼?

這裡的一些東西可能看起來不像JavaScript。不要驚慌。這是未來的 Javascript。
首先,ES2015(也稱為ES6)是對JavaScript的一組改進,現在已成為官方標準的一部分,但尚未得到所有瀏覽器的支持,因此通常在Web開發中尚未使用。 React Native附帶ES2015支持,因此您可以使用這些內容而無需擔心兼容性。上面示例中的import,from,class和extends都是ES2015的功能。如果您不熟悉ES2015,您可以通過閱讀本教程中的示例代碼來獲取它。如果需要,此頁面可以很好地概述ES2015的功能。

此代碼示例中另一個不尋常的事情是<View> <Text> Hello world!</ Text> </ View>。這是JSX - 一種在JavaScript中嵌入XML的語法。許多框架使用特殊的模板語言,允許您在標記語言中嵌入代碼。在React中,這是相反的。 JSX允許您在代碼中編寫標記語言。它看起來像網絡上的HTML,除了像<div>或<span>這樣的網絡內容,你使用React組件。在這種情況下,<Text>是一個內置組件,只顯示一些文本,View就像<div>或<span>。

組件

所以這段代碼定義了HelloWorldApp,一個新的Component。當您構建React Native應用程序時,您將會製作新的組件。你在屏幕上看到的任何東西都是某種組件。一個組件可以非常簡單 - 唯一需要的是一個渲染函數,它返回一些JSX來渲染。



Share
Tweet
Pin
Share
No 意見
Facebook Open Source React Native





開始吧


此頁面將幫助您安裝和構建您的第一個React Native應用程序。 如果您已經安裝了React Native,則可以跳到教程。
快速開始

創建React Native App是開始構建新的React Native應用程序的最簡單方法。 它允許您啟動項目而無需安裝或配置任何工具來構建本機代碼 - 無需安裝Xcode或Android Studio(請參閱警告)。

假設您已安裝Node,則可以使用npm來安裝create-react-native-app命令行實用程序:

npm install -g create-react-native-app
然後運行以下命令以創建名為“AwesomeProject”的新React Native項目:
create-react-native-app AwesomeProject

cd AwesomeProject
npm start
這將為您啟動一個開發服務器。

運行React Native應用程序

在iOS或Android手機上安裝Expo客戶端應用程序,並連接到與計算機相同的無線網絡。 在Android上,使用Expo應用程序掃描終端的QR碼以打開您的項目。 在iOS上,按照屏幕上的說明獲取鏈接。

修改您的應用

現在您已經成功運行了應用程序,讓我們對其進行修改。 在您選擇的文本編輯器中打開App.js並編輯一些行。 保存更改後,應用程序應自動重新加載。

完成

恭喜! 您已成功運行並修改了第一個React Native應用程序。

接下來呢?

  • 創建React Native App還有一個用戶指南,如果您對該工具有特殊疑問,可以參考該用戶指南。
  • 如果無法使其正常工作,請參閱“創建React本機應用程序的自述文件”中的“疑難解答”部分。
如果您想了解有關React Native的更多信息,請繼續閱讀教程。

在模擬器或虛擬設備上運行您的應用程序

創建React Native App使得在物理設備上運行React Native應用程序非常容易,無需設置開發環境。如果您想在iOS模擬器或Android虛擬設備上運行您的應用程序,請參閱使用本機代碼構建項目的說明,以了解如何安裝Xcode和設置Android開發環境。

設置好後,您可以通過運行npm run android在Android虛擬設備上啟動應用程序,或者通過運行npm run ios(僅限macOS)在iOS模擬器上啟動應用程序。

注意事項

因為在使用Create React Native App創建項目時不構建任何本機代碼,所以除了React Native API和Expo客戶端應用程序中可用的組件之外,不可能包含自定義本機模塊。

如果您知道最終需要包含自己的本機代碼,那麼Create React Native App仍然是一個很好的入門方式。在這種情況下,您最終只需要“彈出”以創建自己的本機構建。如果確實彈出,則需要“使用本機代碼構建項目”說明繼續處理項目。

創建React Native App會將項目配置為使用Expo客戶端應用程序支持的最新React Native版本。在React Native版本發布穩定後大約一周,Expo客戶端應用程序通常會獲得對給定React Native版本的支持。您可以查看此文檔以了解支持的版本。

如果要將React Native集成到現有項目中,則需要跳過Create React Native App並直接設置本機構建環境。選擇“使用本機代碼構建項目”,以獲取有關為React Native配置本機構建環境的說明。





Share
Tweet
Pin
Share
No 意見
承上篇
【Angular CLI】Angular CLI 命令列參數紀錄 (中) ng generate,ng lint,ng test,ng e2e

將繼續把剩下的指令介紹完畢
ng build --help 執行畫面
ng build

介紹

ng build 將應用程式編譯到輸出目錄
建構的內容通常儲存於 dist/ 目錄中。

構建或服務於項目的所有命令ng build / serve / e2e將刪除輸出目錄(dist/ 預設)。可以通過--delete-output-path=false選項禁用此功能。

index.html中的基本標記處理
構建時,您可以使用--base-href your-url選項修改index.html中的基本標記(<base href =“/”>)。

#在index.html中將基本標記 href 設置為 /myUrl/
ng build --base-href / myUrl /
綁定和 Tree-Shaking
所有構建都使用綁定 和有限的tree-shaking,而--prod構建也通過UglifyJS運行有限的死代碼消除。

--build-optimizer和--vendor-chunk
使用Build Optimizer時,默認情況下將禁用供應商塊。您可以使用--vendor-chunk = true覆蓋它。

如果沒有單獨的供應商組塊,則使用Build Optimizer的總捆綁包大小會更小,因為與應用程序代碼在同一塊中的供應商代碼使得Uglify可以刪除更多未使用的代碼。

CSS資源
CSS中的資源(如圖像和字體)將作為構建的一部分自動複製。如果資源小於10kb,它也將被內聯。

您將看到這些資源在dist/的根部輸出和指紋識別。

ES2015支持
要在ES2015模式下構建,請編輯./tsconfig.json以使用“target”:“es2015”(而不是es5)。

這將導致應用程序TypeScript和Uglify輸出為ES2015,並通過package.json中的es2015條目加載第三方庫(如果可用)。

參數

--prod
用於將配置設置為“prod”的標誌。

--configuration(別名:-c)
指定要使用的配置。

--main
主入口點文件的名稱。

--polyfills
polyfills文件的名稱。

--ts-config
TypeScript配置文件的名稱。

--optimization
定義構建的優化級別。

--output-path
將放置輸出的路徑。

--aot
使用提前編譯構建。

--source-map
輸出源圖。

--eval-source-map
輸出文件內評估源圖。

--vendor-chunk
使用僅包含供應商庫的單獨捆綁包。

--common-chunk
使用包含跨多個包使用的代碼的單獨包。

--base-href
正在構建的應用程序的基本URL。

--deploy-url
將部署文件的URL。

--verbose
添加更多詳細信息以輸出日誌記錄

--progress
在構建時將進度記錄到控制台。

--i18n-file
用於i18n的本地化文件。

--i18n-format
使用--i18n-file指定的本地化文件的格式。

--i18n-locale
用於i18n的語言環境。

--i18n-missing-translation
如何處理i18n缺失的翻譯。

--extract-cdd
從全局樣式中提取css到css文件而不是js文件。

--watch
文件更改時運行構建。

--output-hashing
定義輸出文件名緩存清除散列模式。

--poll
啟用並定義查看輪詢時間段的文件(以毫秒為單位)。

--delete-ouput-path
在構建之前刪除輸出路徑。

--preserve-symlinks
解析模塊時不要使用真實路徑。

--extract-licenses
僅在生產版本的情況下,在單獨的文件中提取所有許可證。

--show-circular-dependencies
在構建上顯示循環依賴性警告。

--build-optimizer
使用'aot'選項時,啟用@ angular-devkit / build-optimizer優化。

--named-chunks
使用延遲加載的塊的文件名。

--subresource-integrity
允許使用子資源完整性驗證。

--service-worker
為生產版本生成服務工作者配置。

--ngsw-config-path
ngsw-config.json的路徑。

--skip-app-shell
用於防止構建app shell的標誌。

--index
索引HTML文件的名稱。

--stats-json
生成'stats.json'文件,可以使用以下工具進行分析:#webpack-bundle-analyzer 或https://webpack.github.io/analyse。

--fork-type-checker
在分叉的進程中運行TypeScript類型檢查器。

ng config --help 執行畫面

ng get/ng set

介紹

ng config [key] [value] 取得配置的內容。[key] 提供 JSON 路徑的格式 
例如: a[3].foo.bar[0]  
只提供 [key] 將會回傳該值。如果同時提供 [key] 和 [value] 將會設置該值

參數

--global (別名: -g)
獲取/設置配置中的內容(在主目錄中)

ng doc --help 執行畫面
ng doc

介紹

ng doc [關鍵字 ] 使用瀏覽器搜尋 Angular API 的文件。

參數

--search (alias: -s)
搜尋整個 angular.io 的網站不只是API 文件。

ng xi18n --help 執行畫面
ng xi18n

介紹

ng xi18n 從模板中取得 i18n 的資訊 。

參數

--configuration (別名: -c)
指定要使用的配置。

--browser-target
指定瀏覽器的目標。

--i18n-format
生成文件的輸出格式。

--i18n-locale
指定應用程式的語言。

--output-path
輸出的路徑。

--out-file
輸出的檔案名稱。

ng update --help 執行畫面
ng update

介紹

ng update  將目前的應用程式更新到最新版本

參數

--dry-run (別名: -s)
無須進行任何修改即可運行。

--force
如果為false 安裝的內容與更新內容不相容即會出錯。

--all
是否更新 package.json 的所有內容。

--next
使用目前最大的版本包含 beta 和 RC。

--migrate-only
僅執行遷移不更新已安裝的版本。

--from
要從中遷移的版本。

--to
要應用遷移的版本。

--registry
要使用NPM 註冊表。


Angular CLI 指令文章
【Angular CLI】Angular CLI 命令列參數紀錄 (上) ng new,ng serve
【Angular CLI】Angular CLI 命令列參數紀錄 (中) ng generate,ng lint,ng test,ng e2e
【Angular CLI】Angular CLI 命令列參數紀錄 (下) ng build,ng config,ng doc,ng xi18n,ng update


Share
Tweet
Pin
Share
No 意見
承上篇
【Angular CLI】Angular CLI 命令列參數紀錄 (上) ng new,ng serve

ng generate application --help  執行畫面

ng generate

Share
Tweet
Pin
Share
No 意見

ng --help 執行畫面

Angular CLI 是 Angular發展過程中產生的指令列工具,內容包含了軟體開發用的到的功能。

Angular CLI

內容指令適用於 Angular CLI 6 。

簡介

Angular CLI  是一個初始化、開發、搭建和維護 Angular 應用程式的工具。

入門

使用命令列安裝 Angular CLI
npm install -g @angular/cli
安裝完成後就可以使用Angular CLI  來產生並運行新的專案:

新增我的專案
ng new my-project  // 建立新的專案
cd my-project      // 轉到專案目錄
ng serve           // 執行伺服器 (加上參數 --open 或者 --o 就會自動開啟瀏覽器)
使用瀏覽器開啟 http:localhost:4200/ 就可以看到畫面。如果原始文件做了任何的變更應用程式也會自動加載。

附加命令

  • ng new
  • ng serve
  • ng generate
  • ng lint
  • ng test
  • ng e2e
  • ng build
  • ng get/ng set
  • ng doc
  • ng xi18n
  • ng update

ng new  --help  執行畫面

ng new

介紹

ng new [name] 建立一個新的 Angular 應用程式
初始化 Angular 並建立在 [name] 目錄

參數

--dry-run(別名:-d)
無需進行任何更改即可運行。

--force(別名:-f)
強制覆蓋文件。

--verbose(別名:-v)
添加更多詳細信息以輸出日誌記錄

--collection(別名:-c)
要使用的Schematics集合。

--inline-style(別名:-s)
指定樣式是否在ts文件中。

--inline-template(別名:-t)
指定模板是否在ts文件中。

--view-encapsulation
指定視圖封裝策略。

--routing
生成路由模塊。

--prefix(別名:-p)
要應用於生成的選擇器的前綴。

--style
用於樣式文件的文件擴展名。

--skip-tests(別名:-S)
跳過創建規範文件。

--skip-package-json
不要向package.json添加依賴項。

ng serve  --help  執行畫面


ng serve

介紹

ng serve構建應用程序並啟動Web服務器。

參數

--prod
用於將配置設置為“prod”的標誌。

--configuration(別名:-c)
指定要使用的配置。

--browser-target
目標服務。

--port
監聽端口。

--host
監聽網域。

--proxy-config
代理配置文件。

--ssl
使用HTTPS服務。

--ssl-key
用於提供HTTPS的SSL密鑰。

--ssl-cert
用於提供HTTPS的SSL證書。

--open(別名:-o)
在默認瀏覽器中打開網址。

--live-reload
是否使用實時重新加載來重新加載頁面。

--public-host
指定瀏覽器客戶端將使用的URL。

--serve-path
應用程序的路徑名。

--disable-host-check
不驗證連接的客戶端是否為允許的主機的一部分。

--hmr
啟用熱模塊更換。

--watch
改變重建。

--hmr-warning
啟用--hmr選項時顯示警告。

--serve-path-default-warning
當deploy-url / base-href使用不支持的服務路徑值時顯示警告。

--optimization
定義構建的優化級別。

--aot
使用提前編譯構建。

--source-map
輸出源圖。

--eval-source-map
輸出文件內評估源圖。

--vendor-chunk
使用僅包含供應商庫的單獨捆綁包。

--common-chunk
使用包含跨多個包使用的代碼的單獨包。

--base-href
正在構建的應用程序的基本URL。

--deploy-url
將部署文件的URL。

--verbose
添加更多詳細信息以輸出日誌記錄

--progress
在構建時將進度記錄到控制台。

Angular CLI 指令文章
【Angular CLI】Angular CLI 命令列參數紀錄 (上) ng new,ng serve
【Angular CLI】Angular CLI 命令列參數紀錄 (中) ng generate,ng lint,ng test,ng e2e
【Angular CLI】Angular CLI 命令列參數紀錄 (下) ng build,ng config,ng doc,ng xi18n,ng update
Share
Tweet
Pin
Share
No 意見
「reactjs」的圖片搜尋結果
reactjs
由Facebook創建的React已經成為一個非常強大的JavaScript框架,使得程序員的前端開發工作更容易。

MATERIAL UI

「MATERIAL UI」的圖片搜尋結果

Google’s material design 手機的UI 設計

GIT 網址  : https://github.com/mui-org/material-ui
設計官網 : http://www.material-ui.com/

ANT-DESIGN

「ANT-DESIGN」的圖片搜尋結果
中國開發的UI設計庫

GIT 網址  : https://github.com/ant-design/ant-design
設計官網 : https://ant.design/

STORYBOOK

相關圖片
借助Meteor和Firebase等框架,後端開髮變得更加容易。 React Storybook是為前端開發人員創建相同效果的庫。

GIT 網址  : https://github.com/storybooks/storybook
設計官網 : https://storybook.js.org/

GATSBY

「GATSBY reactjs」的圖片搜尋結果

Gatsby是一個建立在React JS框架上的快速靜態站點生成器。 通過使用Gatsby,您可以將純文本轉換為精美的網站,而無需在代碼上花費大量時間。

GIT 網址  : https://github.com/gatsbyjs/gatsby
設計官網 : https://www.gatsbyjs.org/


ENZYME

Enzyme是一個基於React構建的輕量級測試庫,可以作為React的JavaScript測試工具。

GIT 網址  : https://github.com/airbnb/enzyme
設計官網 : http://airbnb.io/enzyme/



BLUEPRINT

「BLUEPRINT reactjs」的圖片搜尋結果

主要是為桌面應用程序構建的。 它是非常靈活的,因為它可以與其他JavaScript框架一起使用,例如AngularJS,VueJS等。 

GIT 網址  : https://github.com/palantir/blueprint
設計官網 : http://blueprintjs.com/


SPECTACLE


Spectacle是一個基於React的庫,用於為Web演示創建質量和動態幻燈片。 您可以使用React組件非常輕鬆地進行演示。

GIT 網址  : https://github.com/FormidableLabs/spectacle
設計官網 : http://formidable.com/open-source/spectacle/


ELEMENTAL UI



ELEMENTAL UI框架與 Material UI框架非常相似,但是更輕巧。

GIT 網址  : https://github.com/elementalui/elemental
設計官網 : http://elemental-ui.com/



GROMMET


Grommet是一個非常靈活的庫,它具有用於Dashboards,Login,Search,Meters等的大型組件,通過配置通過屬性增強了這種靈活性。

GIT 網址  : https://github.com/grommet/grommet
設計官網 : http://grommet.io/


MOZAIK


Mozaik是一個UI 資源庫,為web應用程序創建可愛的儀表板。

GIT 網址  : https://github.com/plouc/mozaik
設計官網 : http://mozaik.rocks/




Share
Tweet
Pin
Share
No 意見
Newer Posts
Older Posts

About me

還在努力掙扎中的工程師

Follow Us

  • Google+
  • facebook
  • twitter

Categories

Accordion Animation AutoComplete CSS Calendar Canvas Carousel Charts Color DatePicker Effects Facebook API Forms Gallery HTML5 Menu Mootools Prototype React images jQuery javascripts lightbox 前端技術 統計圖表 網頁設計

Recent Posts

  • Security Eye 4.4.1 免費網路攝影機監視系統,多路監視器解決方案
  • PotPlayer 1.7.16291 繁體中文免安裝,新增串流媒體播放的 MP4 格式
  • 微軟推出 Font Maker 製作自己專屬 「手寫字型」
  • jQuery Gantt Chart 在網頁上繪製甘特圖的 jQuery 套件
  • Kalendae 一個不依賴任何框架的日期選擇器

Sponsor


勸敗攻略
勸敗分部

Facebook

Blog Archive

  • 6月 2026 (27)
  • 5月 2026 (60)
  • 4月 2026 (58)
  • 3月 2026 (62)
  • 2月 2026 (55)
  • 1月 2026 (62)
  • 12月 2025 (62)
  • 11月 2025 (58)
  • 10月 2025 (62)
  • 9月 2025 (60)
  • 8月 2025 (62)
  • 7月 2025 (62)
  • 6月 2025 (58)
  • 4月 2025 (48)
  • 3月 2025 (60)
  • 2月 2025 (51)
  • 1月 2025 (56)
  • 12月 2024 (61)
  • 11月 2024 (60)
  • 10月 2024 (54)
  • 9月 2024 (55)
  • 8月 2024 (42)
  • 7月 2024 (40)
  • 6月 2024 (19)
  • 9月 2023 (3)
  • 4月 2023 (2)
  • 2月 2023 (1)
  • 12月 2021 (1)
  • 1月 2019 (11)
  • 12月 2018 (31)
  • 11月 2018 (31)
  • 10月 2018 (31)
  • 9月 2018 (30)
  • 8月 2018 (31)
  • 7月 2018 (3)
  • 2月 2018 (1)
  • 4月 2015 (1)
  • 9月 2014 (1)
  • 2月 2014 (1)
  • 7月 2013 (1)
  • 2月 2013 (2)
  • 1月 2013 (1)
  • 12月 2012 (12)
  • 11月 2012 (81)
  • 10月 2012 (64)

Created with by ThemeXpose | Distributed by Blogger Templates