Web开发人员学习React Native的路线图

While I was working as a web developer and using Javascript, Jquery and making a lot of Ajax calls using get and post methods from frontend I came to learn about React Native (or RN)and how it helps in building iOS and Android apps with the single code base and how developers from the web who use javascript on daily basis can easily start working on React Native. But hold the horses here, the learning curve and the difficulty level are not the same as that of vanilla Javascript, not even close. I have been there and did a back forth ride a couple of times to learn these technologies, so I am writing down all of them in this article for you to have a smooth journey. If you are a web developer or you have fewer years of programming experience then this article is for you. A lot of developers can fall prey to the over-exaggerated claims. Although many will say it is not officially declared to learn any prereq for React Native. But building a mobile app with RN requires using several technologies and libraries that can individually take more time than the time you took to learn vanilla Javascript. So just by reading any appealing headline like React Native for JavaScript developers and jumping right into building a mobile app is like trying to step on the topmost of a ladder and missing all the rest.

在我作为一名Web开发人员并使用Javascript,Jquery并使用前端的get和post方法进行许多Ajax调用的过程中,我开始了解React Native(或RN)以及它如何帮助开发者使用React Native(或RN)单一的代码库,以及每天使用javascript的网络开发人员如何轻松地开始在React Native上工作。 但是在这里牵着马走,学习曲线和难度水平与普通Javascript并不相同,甚至不接近。 我曾去过那里,并多次来回学习这些技术,所以我在本文中将所有这些都写下来,以便您顺利进行。 如果您是Web开发人员,或者您有较少的编程经验,那么此文章适合您。 许多开发人员可能会夸大其词。 尽管许多人会说尚未正式宣布要学习React Native的任何先决条件。 但是,使用RN构建移动应用程序需要使用多种技术和库,这些技术和库可能分别比学习原始Javascript花费更多的时间。 因此,只要阅读任何吸引人的标题(如JavaScript开发人员的React Native)并直接跳入构建移动应用程序,就如同试图踏上阶梯的最顶端,而错过所有其余部分。

Image for post
Photo by Tim Grundtner from Pexels
PexelsTim Grundtner

你什么时候应该开始学习React Native (When should you start learning React Native)

I guess the best time to start learning mobile development is when you have experience in web development for at least one or more years. Because web development is relatively easier and by spending enough time coding you learn a lot of things like programming concepts, OOP, databases, mistakes, and how easy it is to make mistakes, how to solve the issues (by this time you are already introduced and thanking Github and StackOverflow). Besides, some web technologies may be used on the mobile or the concepts will be similar for example JS, OOP, functional programming, CSS, form elements, etc.

我想开始学习移动开发的最佳时机是您拥有至少一年或一年以上的Web开发经验。 由于Web开发相对容易,并且通过花费足够的时间进行编码,您学习了很多东西,例如编程概念,OOP,数据库,错误以及犯错误的容易程度,解决问题的方式(到现在为止,您已经了解了并感谢Github和StackOverflow)。 此外,某些网络技术可能会在移动设备上使用,或者其概念将非常相似,例如JS,OOP,功能编程,CSS,表单元素等。

React Native很容易 (Is React Native easy)

I don’t want to scare your bums :) but let’s be honest. Learning mobile development is not a piece of cake and comparatively difficult than web development. No matter if you choose the React Native (which is one of the easiest) or any other platform/framework for mobile development. But once you have good knowledge of all the basic concepts you will fall in love with this technology.

我不想吓your你的流浪汉:)但说实话。 学习移动开发并非易事,而且比Web开发困难。 无论您选择React Native(这是最简单的方法之一)还是任何其他用于移动开发的平台/框架。 但是,一旦您对所有基本概念有充分的了解,您就会爱上这项技术。

React vs React Native (React vs React Native)

The similarities between these two technologies are not only in the name but that they are both used in frontend and Javascript based. The difference is that React is used on the Web and React Native on mobile. A lot of concepts and syntax in React Native is the same as in React. Some experts suggest learning React first before React Native and some do not. So this brings us to our next question.

这两种技术之间的相似之处不仅在名称上,而且都在前端和基于Java的语言中使用。 区别在于,React用于Web上,React Native用于移动上。 React Native中的许多概念和语法与React中的相同。 一些专家建议先学习React,然后再学习React Native,有些则不然。 因此,这使我们想到了下一个问题。

在React Native之前,React JS是必需的吗 (Is React js mandatory before React Native)

I will highly recommend learning React first before learning React Native. Period. There might be champions who started with React Native and built an app in a couple of weeks. But we all have different backgrounds and experiences.

我强烈建议您在学习React Native之前先学习React。 期。 可能会有一些冠军从React Native开始并在几周内构建了一个应用程序。 但是我们都有不同的背景和经验。

这是先决条件 (Here are the Pre Requisites)

Let’s discuss these prereqs separately


1. ES6和高级Javascript (1. ES6 and Advanced Javascript)

Should be familiar with arrays and array manipulation, objects and object manipulation, map/reduce/filter, rest/spread operators, functional programming, fat arrow functions, let/const/var difference

应该熟悉数组和数组操作,对象和对象操作,映射/归约/过滤器,rest / spread运算符,函数编程,粗箭头函数,let / const / var差异

2. Node js (2. Node js)

Nodejs is a backend language. Still, I will recommend learning it because you will be using node.js code in React Native. Many concepts that will be useful in React Native are:

Nodejs是一种后端语言。 尽管如此,我还是建议您学习它,因为您将在React Native中使用node.js代码。 在React Native中有用的许多概念是:

  1. NPM

  2. Commands like npm install, npm installsave-dev, npm start, etc

    像故宫命令安装,安装NPM -保存,开发,NPM启动器等

  3. Promises/Callbacks/Async Await


A couple of crud apps (only backend) and to-do apps, by connecting some databases is extremely important. Or you can do some sort of eCommerce or social media app if you want to go the extra mile.

通过连接一些数据库,几个粗糙的应用程序(仅后端)和待办事项应用程序非常重要。 或者,如果您想加倍努力,可以使用某种电子商务或社交媒体应用程序。

3.React (3. React)

As discussed earlier, it is not officially mandatory to learn React but I strongly recommend to learn React first and at least cover these topics:


  1. Components (Class vs Functional)

  2. Controlled components

  3. Handlers

  4. this.setState and this.props in React

  5. Life cycle methods

  6. Fetch/Axios for calling APIs

    提取/ Axios用于调用API

4. Redux与React (4. Redux with React)

Redux is used for global state management since the state is maintained on a component level in React, you can pass handlers with variables to child components from parents and vice versa which becomes messy and hard to manage when your app grows and becomes complex. Redux comes to the rescue. But the official documentation says don’t be too quick to use redux. Sometimes in small apps, it is better not to use redux. So use it after having learned the basics of React.

Redux用于全局状态管理,因为状态是在React中的组件级别上维护的,您可以将带有变量的处理程序从父级传递到子级组件,反之亦然,当您的应用程序增长和变得复杂时,它变得混乱且难以管理。 Redux进行了救援。 但是官方文档说,不要很快使用redux。 有时在小型应用程序中,最好不要使用redux。 因此,在学习了React的基础知识之后,请使用它。

You can learn redux in react native as well and it is still entirely the same. But the reason being in learning with React is that you will find a lot of answers and community support on Redux from React category and less in RN.

您还可以在react native中学习redux,并且仍然完全相同。 但是使用React学习的原因是,您将从React类别中获得有关Redux的大量答案和社区支持,而在RN中则更少。

5. Flexbox (5. Flexbox)

If you don’t know it already then you must learn it. Flexbox is useful in designing your UI and important component of Roadmap to Learning React Native. It will require your small time to grasp and you will have huge benefits on styling your components. I will suggest you FlexboxFroggy, this website having 24 small exercises and you will be all done.

如果您还不了解它,那么您必须学习它。 Flexbox在设计UI和学习React Native路线图的重要组件时很有用。 这将需要您花费很少的时间来掌握,并且在样式设计组件方面将具有巨大的好处。 我会建议您FlexboxFroggy ,该网站有24个小练习,您将全部完成。

6.知道的 (6. Good to know)

Here, technically my Roadmap to learning React Native completes. But I will suggest some more tools for your arsenal. These are not mandatory to know but you will be able to write more efficiently if you know them as well

在这里,从技术上来说,我的学习React Native的路线图已经完成。 但我会为您的武器库建议更多工具。 这些不是必须要知道的,但是如果您也知道它们,您将能够更有效地写作

Chances are you already know them or you learn them while learning your React course. These are as follows:

您可能已经知道它们,或者在学习React课程时学习了它们。 这些如下:

  • redux-thunk

  • redux-saga


  • React hooks

  • Typescript

  • Proptypes

  • Any database to connect your app, preferably Firebase (it is a good cloud solution by Google for authentication, databases, storage and more. But if you are short of time or like any other database then you can skip)


完成先决条件,现在做什么 (Done with the prerequisites, Now What)

Now that you have completed the prerequisites you can start learning React Native finally. But let's wait, when you will be setting up an environment for React Native, you will see two options to set up RN environment

现在您已经完成了前提条件,您可以最终开始学习React Native。 但是让我们等待,当您为React Native设置环境时,您会看到两个设置RN环境的选项

Image for post

Expo CLI(或expo init) (Expo CLI (or expo init))

So, again two options to choose. Which one to choose. Short answer: Choose both. One by one. And choose the Expo first. It is built on the top of the react-native CLI project itself. And provide many built-in APIs and tools which will take your good time to set up in the react-native CLI project. And takes care of native code itself.

因此,再次有两个选择可供选择。 选择哪一个。 简短答案:选择两者。 逐个。 并首先选择世博会。 它建立在react-native CLI项目本身的顶部。 并提供许多内置的API和工具,这将花费您大量的时间在react-native CLI项目中进行设置。 并且照顾本机代码本身。

Once you setup the environment, go ahead and test out your React and all the knowledge you already learned by implementing the following:


  1. Use simple components like Image, Text, TouchableOpacity (Button), Alert, Toast, etc

  2. Debug using console.log

  3. Use Flatlist to display static data

  4. Use Life cycle methods

  5. Use API for dynamic data

  6. Add react-navigation

  7. Add redux

  8. Familiarize yourself with debugging tools

  9. Add redux persist

  10. Redux persist with storge

  11. and so on


But why the hell we have react-native CLI if Expo is that much useful.


Many native APIs are not yet supported in Expo like Bluetooth plus more. Read about further Expo limitations here. To overcome that, you will have to switch to our second method.

世博会尚不支持许多本机API,例如蓝牙等。 在此处了解更多世博限制 。 为了克服这个问题,您将不得不切换到第二种方法。

React Native CLI(或react-native init) (React Native CLI (or react-native init))

As we discussed that Expo CLI is limited which brings us to use react-native CLI to create apps. It gives us more power. We have different projects for iOS and Android. So that, we can integrate 3rd party SDKs or write a bridge to communicate between native and Javascript. For many medium to large projects, you will switch from expo or start from here only.

正如我们所讨论的那样,Expo CLI受限制,这使我们不得不使用React-native CLI创建应用程序。 它给了我们更多的力量。 我们有适用于iOS和Android的不同项目。 这样,我们就可以集成第三方SDK或编写一个在本机和Javascript之间进行通信的桥梁。 对于许多大中型项目,您只能从博览会上切换或仅从此处开始。

提示 (Tips)

  1. Run your app on a simulator/emulator first, and then on your device as well

  2. Run your code on both platforms and run often, when you integrate a new feature or install and link a new library. Even RN works for both but there might be some tweaks that you may need to do

    集成新功能或安装并链接新库时,请在两个平台上都运行代码,并经常运行。 甚至RN都适用于两者,但是您可能需要做一些调整
  3. If you are stuck on an error or unexpected behavior of the app, you must search in the open issues of the library you just installed or linked, or search on Google if others are facing the issue as well. Since RN is growing you will see some unexpected errors and warnings.

    如果您因应用程序的错误或意外行为而陷入困境,则必须搜索刚刚安装或链接的库的未解决问题,或者如果其他人也遇到此问题,请在Google上搜索。 由于RN不断增长,您将看到一些意外的错误和警告。

结论 (Conclusion)

That’s all. Hope I have covered all the important steps on what luggage you should pack before starting your React Native journey and make it a smooth one.

就这样。 希望我已经介绍了在开始React Native旅程并使其变得平稳之前应该打包什么行李的所有重要步骤。

Happy Coding.


使用Bit共享和管理可重用的React Native组件 (Share & Manage Reusable React Native Components with Bit)

Use Bit (Github) to share, document, and manage reusable components from different projects. It’s a great way to increase code reuse, speed up development, and build apps that scale.

使用Bit ( Github )共享,记录和管理来自不同项目的可重用组件。 这是增加代码重用,加速开发并构建可扩展应用程序的好方法。

Image for post
Example: exploring shared React components on Bit.dev
示例:在 Bit.dev上浏览共享的React组件

相关故事 (Related Stories)

翻译自: https://blog.bitsrc.io/a-web-developers-roadmap-to-learning-react-native-9e52f5d5d38e

  • 0
  • 0
  • 0


  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
钱包余额 0