【React Native】文件翻譯閱讀紀錄 - 基礎 - 基礎學習

by - 上午9:00




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來渲染。



You May Also Like

0 意見