如何开始使用React Native
by Spencer Carli
斯宾塞·卡利(Spencer Carli)
如何开始使用React Native (How to Get Started with React Native)
Before diving in I want to tell you a little story — I’ve been wanting to put together a simple website. Not a web app, just a simple website. I haven’t done that in a quite a while so I started looking around for how to do it…
在潜水之前，我想告诉您一个小故事-我一直想建立一个简单的网站。 不是网络应用程序，只是一个简单的网站。 我已经有一段时间没有这样做了，所以我开始四处寻找如何做……
… and then I found myself falling down a rabbit hole of increasing complexity, using different tools, and forgetting about what I actually wanted to build.
……然后我发现自己陷入了复杂性日益增加的兔子洞，使用了不同的工具，而忘记了我真正想要构建的东西。
I ended up throwing everything I did away (it was useless anyway), signing up for a course, and just following along so I could get a sense of things before working on my project.
我最终把我所做的一切都扔掉了(无论如何这都是没用的)，报名参加了一个课程，然后继续学习，这样我就可以在进行项目之前了解一下事情。
Most of my time is spent in the realm of React Native, and on the web I see many people in the same situation I was in. I email and chat with a few dozen people a week who are also interested in learning React Native. They’ve heard about it from a friend or a co-worker, seen it mentioned on Twitter, a client insists on using it for a project, or one of a dozen other reasons. Tech people are very diverse in how and why they learn about new things.
我的大部分时间都花在React Native的领域上，并且在网络上，我看到很多处于同样情况的人。我每周与数十个人同样对学习React Native感兴趣的人进行电子邮件和聊天。 他们从朋友或同事那里听说过此消息，在Twitter上看到了该消息，客户坚持要在项目中使用它，或者是其他多种原因之一。 科技人员在学习新事物的方式和原因方面非常多样化。
Some people are coming from a web development background, others have used tools like Cordova, and others are making the leap into the JavaScript world for the first time. Regardless of someone’s background many of the same things come up.
有些人来自Web开发背景，有些人使用了Cordova这样的工具，而另一些人则首次进入JavaScript世界。 无论某人的背景如何，都会出现许多相同的事情。
JavaScript语法问题 (JavaScript Syntax Woes)
class App extends React.Component { ... }Okay, I’ve seen classes before. No big deal — but in JavaScript?
好吧，我以前看过课。 没什么大不了-但使用JavaScript？
const { amount, purchaseDate } = this.props;Huh, const and what’s with the curly braces on the left of the equals?
呵呵， const ，等号左边的花括号是什么？
export default App;export App;What’s the difference, though?
不过有什么区别？
Regardless of whether you’re familiar with JavaScript or not the use of ES2015/ES6 trips people up, a lot. And it’s very common in React Native. People who have used JavaScript often haven’t used this (relatively) new syntax. And people who are just learning JavaScript are often referencing tutorials that don’t use it . This leads towards more confusion.
无论您是否熟悉JavaScript，ES2015 / ES6的使用都会使很多人感到不适。 这在React Native中很常见。 使用过JavaScript的人通常没有使用这种(相对)新语法。 而且刚学习JavaScript的人们经常引用不使用它的教程。 这导致更多的混乱。
Just know that what you see in Javascript tutorials still applies, as does what you’ve previously learned. ES2015/ES6 is simply an extension that makes it easier to do things (once you’re familiar with it).
只需知道您在Javascript教程中看到的内容仍然适用，就像您以前所学的一样。 ES2015 / ES6只是一个扩展，使操作变得更轻松(一旦您熟悉它)。
To learn ES2015/ES6 check out this no-fluff intro by Babel. There’s also a nice series that will introduce and explain things to you.
要了解ES2015 / ES6，请查看Babel的这个概貌介绍 。 还有一个不错的系列 ，将向您介绍和解释事物。
对React有基本了解 (Have a Basic Grasp on React)
I know you want to dive right into React Native — it’s awesome. But if you want to minimize confusion, then I would suggest spending a bit of time understanding the basics of a React application.
我知道您想直接进入React Native- 太棒了 。 但是，如果您想最大程度地减少混乱，那么我建议您花一些时间来了解React应用程序的基础知识。
There’s some terminology you’ll want to know and you’ll want to understand how you compose an application. React Native is an extension of React. It’s just a different client target that’s using React and its principles to create the application.
您需要了解一些术语，并且希望了解如何编写应用程序。 React Native是React的扩展。 使用React及其原理创建应用程序只是一个不同的客户目标。
Getting a grasp on React is a good use of time. Looking through the homepage alone will help you quite a bit. I also suggest you look through the official tutorial to get an even better grasp.
掌握React是很好地利用时间。 仅浏览主页将对您有很大帮助。 我还建议您仔细阅读官方教程，以更好地掌握。
You don’t have to spend a ton of time here building a complex web application with React, just use this time getting familiar with the idea of React.
您不必在这里花费大量时间在React上构建复杂的Web应用程序，而只是利用这段时间来熟悉React的想法。
搭建开发环境 (Setting Up the Development Environment)
You don’t need a special text editor. Whatever you’ve been using will likely work fine. Don’t stress about the editor right now.
您不需要特殊的文本编辑器。 无论您使用什么，都可能会正常工作。 现在不要再强调编辑器了。
Now if you want to build a React Native app, which works on iOS and Android, you’ve got to install all the development tools for those platforms, right?
现在，如果您想构建一个可在iOS和Android上运行的React Native应用，则必须安装这些平台的所有开发工具，对吗？
Well, no. Not right now at least.
好吧，不。 至少现在不行。
There’s a tool called Expo which takes care of all the native development environment stuff so you can focus on learning React Native and building apps with it.
有一个名为Expo的工具可以处理所有本机开发环境的内容，因此您可以专注于学习React Native并使用它来构建应用程序。
But wait — it gets better! There’s a command line tool called Create React Native App which makes it even easier to get started with React Native. It’s backed by Expo which means all we have to do is install the command line interface and then we’re off to the React Native races!
但是，等等-它会变得更好！ 有一个名为Create React Native App的命令行工具，它使使用React Native的入门变得更加容易 。 它得到了Expo的支持，这意味着我们要做的就是安装命令行界面，然后我们开始进行React Native竞赛！
Scan the QR code output from the Expo app and start hacking! The code will update on every file save.
扫描Expo应用程序输出的QR码，然后开始黑客入侵！ 该代码将在每次保存文件时更新。
我如何… (How do I…)
Here’s a rapid fire, opinionated, list of tools to handle common needs:
这是处理常见需求的工具的清单，包括：
Manage state: Redux
管理状态： Redux
Work with a remote API: Redux Saga
使用远程API： Redux Saga
Navigation: React Navigation
导航： React导航
Share the app: Publish to Expo
分享应用程序： 发布到Expo
Style the app: React Native Extended StyleSheet
设置应用样式： React Native Extended StyleSheet
A code editor: Visual Studio Code
代码编辑器： Visual Studio代码
I hope that helps you get up and running with React Native a bit faster and with less confusion!
我希望这可以帮助您更快地入门并运行React Native，并减少混乱！
I put together a free video course that walks you through building a React Native app from setting up your development environment to publishing to Expo. Spend some time understanding ES2015, get a general sense of React, and dive into this course. It’s helped hundreds already and I hope it can help you too!
我整理了一个免费的视频课程，指导您构建React Native应用程序，从设置开发环境到发布到Expo。 花一些时间了解ES2015，对React有一个大致的了解，并深入学习此课程。 它已经帮助了数百人，我希望它也能为您提供帮助！
React Native Basics: Build a Currency ConverterLearn to Use Navigation, Setup Redux, Design Components, Work with a Remote API, and Morelearn.handlebarlabs.com
React Native基础知识：构建货币转换器 学习使用导航，设置Redux，设计组件，使用远程API以及其他内容 。Learn.handlebarlabs.com
If you enjoyed this be sure to recommend it and send it to someone who wants to learn React Native!
如果您喜欢它，请务必将其推荐并发送给想要学习React Native的人！
翻译自: https://www.freecodecamp.org/news/how-to-get-started-with-react-native-8ef42f65160a/