by Taylor Milliman

泰勒·米利曼(Taylor Milliman)

構(gòu)建了我的第一個(gè)React Native應(yīng)用程序之后，我現(xiàn)在確信這是未來。 (After building my first React Native app, I’m now convinced it’s the future.)

After a few weeks of playing around with React Native, I just came away with my first real mobile app. It’s fairly simple, but it only took me a few days to build and I had a blast doing it.

在使用React Native玩了幾周之后，我才有了第一個(gè)真正的移動(dòng)應(yīng)用程序。 這很簡單，但是我只花了幾天的時(shí)間就完成了開發(fā)工作。

I created a mobile app for my favorite food blog, Smitten Kitchen.

我為我最喜歡的美食博客Smitten Kitchen創(chuàng)建了一個(gè)移動(dòng)應(yīng)用程序。

The app allows users to search through a database of over 1,000 recipes, and concisely view the necessary ingredients and directions for each one.

該應(yīng)用程序允許用戶搜索包含1000多個(gè)食譜的數(shù)據(jù)庫，并簡潔地查看每個(gè)食譜的必要成分和說明。

Users can also bookmark recipes and easily share them with a friend.

用戶還可以為食譜添加書簽，并輕松與朋友分享。

I’m still waiting for permission from the blog to publish this app, but you can check out all of the code here. Note that the url for my API has been stubbed for the time being out of respect for Smitten Kitchen.

我仍在等待博客的許可以發(fā)布此應(yīng)用，但是您可以在此處查看所有代碼。 請(qǐng)注意，出于對(duì)Smitten Kitchen的尊重，我的API的網(wǎng)址已被暫時(shí)刪除。

React Native不會(huì)很快消失 (React Native isn’t going away any time soon)

A common reservation among developers is that they don’t want to invest the time to learn a new technology if there’s a strong chance it will become obsolete in the near future.

開發(fā)人員的共同保留意見是，如果有很大的機(jī)會(huì)在不久的將來過時(shí)，他們就不想花時(shí)間學(xué)習(xí)新技術(shù)。

Even from my relatively minimal experience with React Native, I’ve found it to be an enormously powerful tool. I am confident it will be used in the years to come.

即使從相對(duì)最少的React Native經(jīng)驗(yàn)中，我也發(fā)現(xiàn)它是一個(gè)非常強(qiáng)大的工具。 我相信它將在未來幾年中使用。

Facebook, Instagram, and Airbnb all built the latest versions of their mobile apps using React Native. And here’s a list of the some other popular apps that were built using it.

Facebook，Instagram和Airbnb都使用React Native構(gòu)建了最新版本的移動(dòng)應(yīng)用程序。 這是使用它構(gòu)建的其他一些流行應(yīng)用的列表 。

Jeff Meyerson, creator of the podcast Software Engineering Daily, has talked extensively about the React Native platform. He believes it will survive and continue to capture the majority of the mobile ecosystem.

播客軟件工程日?qǐng)?bào)的創(chuàng)建者Jeff Meyerson廣泛討論了React Native平臺(tái)。 他認(rèn)為，這種技術(shù)將生存并繼續(xù)占領(lǐng)大多數(shù)移動(dòng)生態(tài)系統(tǒng)。

He has even speculated that Facebook may be creating their own mobile phone, which would be built specifically to support apps made with React Native.

他甚至推測(cè)，Facebook可能正在制造自己的手機(jī)，該手機(jī)將專門為支持使用React Native制作的應(yīng)用而制造。

React Native與其他跨平臺(tái)工具有何不同 (How React Native is different from other cross-platform tools)

If you’re new to React Native, it’s an open source project started by Facebook. It allows developers to build cross-platform mobile apps using JavaScript. It works very similarly to React, Facebook’s popular JavaScript library for building single page web applications.

如果您是React Native的新手，那么這是一個(gè)由Facebook啟動(dòng)的開源項(xiàng)目。 它允許開發(fā)人員使用JavaScript構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用程序。 它的工作原理與React十分相似，它是Facebook流行JavaScript庫，用于構(gòu)建單頁Web應(yīng)用程序。

I’ve always been skeptical of tools that advertise themselves as cross-platform for mobile. All too often you end up with a look, feel, and performance that doesn’t quite match the native platform.

我一直對(duì)那些宣傳自己為移動(dòng)平臺(tái)的跨平臺(tái)工具持懷疑態(tài)度。 通常，您最終會(huì)獲得與本地平臺(tái)不完全匹配的外觀，感覺和性能。

React Native is not like other mobile app development frameworks, such as Ionic or Cordova. Those run inside of a web view, or an “HTML5 app,” or a “hybrid app.”

React Native與其他移動(dòng)應(yīng)用程序開發(fā)框架(例如Ionic或Cordova)不同。 它們?cè)诰W(wǎng)絡(luò)視圖，“ HTML5應(yīng)用”或“混合應(yīng)用”中運(yùn)行。

You build a high performance mobile app that is indistinguishable from one that is built using Swift/Objective-C or Java.

您構(gòu)建的高性能移動(dòng)應(yīng)用程序與使用Swift / Objective-C或Java構(gòu)建的應(yīng)用程序沒有區(qū)別。

That being said, it is still important to understand the intricacies and differences between platforms. The user experience for Android and iOS are fundamentally different, and you still need to build your app in a way that will feel natural on both platforms.

話雖如此，理解平臺(tái)之間的復(fù)雜性和差異仍然很重要。 Android和iOS的用戶體驗(yàn)在根本上是不同的，并且您仍然需要以在兩種平臺(tái)上都感覺自然的方式構(gòu)建應(yīng)用程序。

In addition, if there is ever a feature that you need to add that is not yet supported by the React Native library, React Native makes it easy to write your own Native Module in the corresponding language, which can then be linked to your React Native codebase.

另外，如果有需要添加的功能，而React Native庫尚不支持，則React Native可以輕松地以相應(yīng)的語言編寫自己的Native模塊 ，然后可以將其鏈接到React Native代碼庫。

如何開始 (How To Get Started)

Personally, I used this Udemy course to get started. It served as a nice refresher of react and redux, and was helpful for getting setup.

我個(gè)人是使用Udemy課程來開始學(xué)習(xí)的。 它充當(dāng)了React和Redux的不錯(cuò)的復(fù)習(xí)，并有助于進(jìn)行設(shè)置。

And recently Facebook released Create React Native App. This tool further simplifies the initial setup process.

最近，Facebook發(fā)布了Create React Native App 。 該工具進(jìn)一步簡化了初始設(shè)置過程。

If you’re already familiar with React, you can probably dive straight into the documentation. For only $10 however, the course is a bargain and walks you through the process of making four mobile apps as well as common components that you can reuse in future projects.

如果您已經(jīng)熟悉React，可以直接閱讀文檔 。 但是，只需花費(fèi)10美元，這門課程就可以講價(jià)，并且引導(dǎo)您完成制作四個(gè)移動(dòng)應(yīng)用程序以及可以在將來的項(xiàng)目中重用的通用組件的過程。

Udemy also offers a course covering Advanced React Native Concepts, for those already familiar with the platform.

Udemy還為已經(jīng)熟悉該平臺(tái)的人員提供了涵蓋Advanced React Native概念的課程。

在React Native中樣式化 (Styling in React Native)

Styling in React Native takes some getting used to. React Native heavily uses CSS flexbox, something that I was not particularly comfortable with, even coming from a web background.

React Native的樣式需要一些習(xí)慣。 React Native大量使用CSS flexbox，我對(duì)此不太滿意，甚至來自網(wǎng)絡(luò)背景。

Luckily there are already some fantastic resources to learn about flexbox:

幸運(yùn)的是，已經(jīng)有了一些很棒的資源來學(xué)習(xí)flexbox：

How flexbox works — explained with big, colorful, animated gifs

flexbox的工作原理-用大尺寸，彩色動(dòng)畫gif進(jìn)行解釋

React Native Layout Examples

React Native布局示例

A fun game to help you practice: Flexbox Froggy

一個(gè)有趣的游戲可以幫助您練習(xí)： Flexbox Froggy

After working with React Native for a few weeks, I now have a much better understanding of flexbox, which I can apply to my next web project.

在與React Native一起工作了幾周之后，我現(xiàn)在對(duì)Flexbox有了更好的了解，我可以將其應(yīng)用于下一個(gè)Web項(xiàng)目。

The current best practice is to create a styles object for each component, then apply it via inline-styles. Keep in mind that you are not actually writing CSS, so the naming of properties is a little different as well.

當(dāng)前的最佳實(shí)踐是為每個(gè)組件創(chuàng)建一個(gè)樣式對(duì)象，然后通過內(nèi)聯(lián)樣式應(yīng)用它。 請(qǐng)記住，您實(shí)際上并不是在編寫CSS，因此屬性的命名也有所不同。

Another key difference is that you cannot use HTML tags in your javascript, because you are writing code to run on a phone, rather than in a browser. Instead, components are built with a set of base level components provided by the React Native library.

另一個(gè)主要區(qū)別是您不能在javascript中使用HTML標(biāo)記，因?yàn)槟诰帉懸谑謾C(jī)而非瀏覽器上運(yùn)行的代碼。 相反，組件是由React Native庫提供的一組基本級(jí)別的組件構(gòu)建的。

It takes a little getting used to, but before you know it you’ll find yourself accidentally using a <View>&lt;/View> tag in place of a <div></div> in your next web app.

這需要一點(diǎn)時(shí)間來適應(yīng)，但是在您不了解它之前，會(huì)發(fā)現(xiàn)自己不小心在下一個(gè)Web應(yīng)用程序中使用<View>& lt; / View>標(biāo)記place of a <div> </ div>。

To get a better feel for how all of this works, take a peek at the code for a simple button component below.

為了更好地了解所有這些工作原理，請(qǐng)看一下下面的簡單按鈕組件的代碼。

Here’s the GitHub gist.

這是GitHub要點(diǎn) 。

導(dǎo)航 (Navigation)

Navigation is one of the few areas of React Native where there is not a consensus on a clear solution.

導(dǎo)航是React Native少數(shù)幾個(gè)在清晰解決方案上尚未達(dá)成共識(shí)的領(lǐng)域之一。

React Router has become the standard library of choice for the React community, but there are a number of libraries floating around in the React Native community.

React Router已經(jīng)成為React社區(qū)的標(biāo)準(zhǔn)庫選擇，但是React Native社區(qū)中有很多庫在浮動(dòng)。

Personally I used the React Native Router Flux library for my project which worked just fine. But I can see how you might run into some bigger issues on more complex projects.

我個(gè)人在我的項(xiàng)目中使用了React Native Router Flux庫，效果很好。 但是我可以看到您可能會(huì)在更復(fù)雜的項(xiàng)目中遇到一些更大的問題。

Luckily, React Native has already developed a massive community. New versions of the project are released every month, so I am confident that issues like navigation will be solved over time.

幸運(yùn)的是，React Native已經(jīng)建立了一個(gè)龐大的社區(qū)。 該項(xiàng)目的新版本每個(gè)月都會(huì)發(fā)布，因此我相信隨著時(shí)間的推移，導(dǎo)航等問題將得到解決。

開發(fā)人員體驗(yàn)事項(xiàng) (Developer Experience Matters)

The ability to share code between Android and iOS applications is undoubtedly a draw of React Native, but it is only a small part of what makes the tool so incredible.

在Android和iOS應(yīng)用程序之間共享代碼的能力無疑是React Native的一大特色，但這只是使該工具如此令人難以置信的一小部分。

My favorite part of using React Native is the ability to reload immediately. I have used Android Studio in the past, and commonly had to deal with 30–60 second build times.

使用React Native時(shí)，我最喜歡的部分是能夠立即重新加載。 我過去使用過Android Studio，通常不得不處理30–60秒的構(gòu)建時(shí)間。

This saves time and I found it easier to get into a flow state without those pesky build times to disrupt me.

這樣可以節(jié)省時(shí)間，而且我發(fā)現(xiàn)更容易進(jìn)入流程狀態(tài)，而沒有那些煩人的構(gòu)建時(shí)間來打擾我。

React Native makes mobile development fun again, and that alone is enough of a reason to try it out for your next project.

React Native使移動(dòng)開發(fā)再次變得有趣，僅此一個(gè)理由就足以在下一個(gè)項(xiàng)目中進(jìn)行嘗試。

愿意探索 (Be Willing To Explore)

React Native is a perfect example of what can happen when we apply ideas that have proven successful in one area of software (web), to a seemingly separate area (mobile).

當(dāng)我們將在某個(gè)軟件領(lǐng)域(網(wǎng)絡(luò))中已被證明成功的想法應(yīng)用到看似獨(dú)立的領(lǐng)域(移動(dòng)設(shè)備)時(shí)，React Native就是一個(gè)很好的例子。

As Haseeb Quereshi convincingly argued in his talk on convergence, as software engineers we should be converging on certain principles, languages and tools that can be successfully applied universally.

正如Haseeb Quereshi在關(guān)于融合的 演講中令人信服地指出的那樣，作為軟件工程師，我們應(yīng)該集中在可以成功普遍應(yīng)用的某些原理，語言和工具上。

We should want to find what really is the optimal solution.

我們應(yīng)該希望找到真正的最佳解決方案。

“Keep your identity small” — Paul Graham“讓您的身份小”-Paul Graham

Often times we become overly dogmatic within a community, which comes at the cost of gaining important insights from outside communities.

通常，我們?cè)谝粋€(gè)社區(qū)內(nèi)變得過于教條主義，這是以從外部社區(qū)獲得重要見解為代價(jià)的。

Go explore other areas.

去探索其他領(lǐng)域。

If you try out React Native, you’ll see just how awesome the results can be.

如果您嘗試使用React Native，您將看到結(jié)果多么棒。

Thank you so much for taking the time out of your day to read my article.

非常感謝您抽出寶貴的時(shí)間閱讀我的文章。

To read more of my writing on Software Development and Personal Development, visit taylormilliman.me.

要閱讀有關(guān)軟件開發(fā)和個(gè)人開發(fā)的更多文章，請(qǐng)?jiān)L問taylormilliman.me 。

If you’d enjoy more detailed articles/tutorials about React Native, click the ? below and feel free to leave a comment below.

如果您喜歡有關(guān)React Native的更詳細(xì)的文章/教程，請(qǐng)單擊“？”。 請(qǐng)隨時(shí)在下面發(fā)表評(píng)論。

翻譯自: https://www.freecodecamp.org/news/after-building-my-first-react-native-app-im-now-convinced-it-s-the-future-d3c5e74f8fa8/

總結(jié)

以上是生活随笔為你收集整理的构建了我的第一个React Native应用程序之后，我现在确信这是未来。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。