React Native is a popular choice for web and mobile apps, being a framework for creating native apps using JavaScript. It compiles to the native app components, which make creating native mobile apps possible. On the other hand, Facebook created React JS to address its need for a User Interface that’s not only high-performing but dynamic as well.
React Native是Web和移动应用程序的流行选择，它是使用JavaScript创建本机应用程序的框架。 它可以编译为本地应用程序组件，从而可以创建本地移动应用程序。 另一方面，Facebook创建了React JS来满足其对不仅高性能而且动态的用户界面的需求。
Referred often as React, React JS is a library of JavaScript that’s responsible for building a UI components hierarchy. In other words, it’s responsible for rendering User Interface components. React provides support for the server-side and frontend. Today, React development services are in demand as more and more organizations are considering software solutions that are crafted from the framework.
React JS通常被称为React，它是一个JavaScript库，负责构建UI组件层次结构。 换句话说，它负责呈现用户界面组件。 React提供了对服务器端和前端的支持。 如今，随着越来越多的组织正在考虑根据框架设计的软件解决方案， React开发服务需求旺盛。
React Native和React JS (React Native and React JS)
After being around for a few years now, React Native has indeed become an interesting framework since it could be used for Android, as well as enables building cross-platform mobile apps. There are of course differences that you need to know before you attempt to share code between the two platforms.
经过了几年的发展，React Native确实已经成为一个有趣的框架，因为它可以用于Android，还可以构建跨平台的移动应用程序。 当然，在尝试在两个平台之间共享代码之前，您需要了解一些差异。
React Native is a framework, while React JS is a library of JavaScript that could be used for your site. React Native comes with everything that you could need and probably there would be nothing that you need more. React JS could be used for building a high-performing User Interface layer.
React Native是一个框架，而React JS是可以用于您的站点JavaScript库。 React Native附带了您可能需要的所有东西，可能没有更多您需要的东西了。 React JS可用于构建高性能的用户界面层。
The heart of React Native is React JS, and it embodies all the syntax and principles of React, thus the learning curve is easy. There are of course technical differences between the two. The browser code in React is rendered through a Virtual DOM. React Native on the other hand uses native APIs to render components on mobile.
React Native的核心是React JS，它体现了React的所有语法和原理，因此学习起来很容易。 两者之间当然存在技术上的差异。 React中的浏览器代码通过虚拟DOM呈现。 另一方面，React Native使用本地API在移动设备上呈现组件。
In React Native, you must be familiar with the React Native syntax, while React utilizes HTML Moreover, React Native does not use CCS, meaning that you would have to utilize the animated API that comes with React Native for animating the various app components.
在React Native中，您必须熟悉React Native语法，而React使用HTML。此外，React Native不使用CCS，这意味着您必须利用React Native随附的动画API来对各种应用程序组件进行动画处理。
The bottom line is that React is the ideal choice for creating high performing, dynamic, responsive UI for web interfaces. On the other hand, React Native is intended to provide a truly native feel on mobile apps.
最重要的是， React是为Web界面创建高性能，动态，响应式UI的理想选择。 另一方面，React Native旨在在移动应用程序上提供真正的原生感觉。
为什么要共享代码？ (Why Share Code?)
With the demand for React Native apps, a React Native developer gains a competitive edge in the IT industry. Why the preference for React Native? Because it provides several advantages.
随着对React Native应用程序的需求， React Native开发人员在IT行业获得了竞争优势。 为什么偏爱React Native？ 因为它提供了几个优点。
One of the advantages when using React Native is to share code across different devices. This is possible because React Native under the hood utilizes the same component which is used on the web. Normally, projects fall into an instance when they should create a platform that is reusable in React JS, for both React Native mobile apps and the website.
使用React Native的优势之一是在不同设备之间共享代码。 这是可能的，因为引擎盖下的React Native使用的是Web上使用的相同组件。 通常，当项目应该为React Native移动应用程序和网站创建可在React JS中重用的平台时，就会陷入一个实例。
The question of sharing code as a matter of fact between React Native and React JS is one of the hot topics among a React development company and React developers globally. It was the logical choice for the web with React Native on mobiles. This enables a React native app development company to have a single team on the project working on a single-page app, and a mobile app as well.
实际上，在React Native和React JS之间共享代码的问题是React开发公司和全球React开发人员之间的热门话题之一。 在移动设备上使用React Native是Web上合理的选择。 这样一来， React本机应用程序开发公司就可以拥有一个项目团队，该团队可以处理单页应用程序，也可以使用移动应用程序。
Both React Native and React enable a learn-once-write-anywhere paradigm. Since one tech team could create both your native mobile and web app experience, this is indeed great. The problem however is that developers hate writing things twice.
React Native和React都支持随处学习写入范例。 由于一个技术团队可以创建您的本机移动和Web应用程序体验，所以这确实很棒。 但是问题是开发人员讨厌两次写东西。
There have been several efforts to create a unifying technology to write an app once and have it work on native and the web. Still, this is not the best approach all the time. There is value in sharing only our state and business logic; keeping separate your render code.
已经做出了种种努力来创建一种统一技术，以便一次编写一个应用程序并使它在本机和Web上都能正常工作。 不过，这并非一直都是最好的方法。 仅共享我们的状态和业务逻辑是有价值的； 将您的渲染代码分开。
概念，解释 (The Concept, an Explanation)
Let’s go to the concept first. React Native could load files on the current platform basis. We need to index files as index.ios.html and index.android.html for instance.
让我们先谈谈概念。 React Native可以在当前平台上加载文件。 例如，我们需要将文件索引为index.ios.html和index.android.html。
The index.ios.html would be picked up automatically by React Native when an app is running on an iOS device, and when it runs on Android, it’s the index.android.html. It also has native extensions, besides the extensions of both, which could be used when a module needs to be shared between them.
当应用程序在iOS设备上运行时，React Native会自动拾取index.ios.html，而在Android设备上运行时，它就是index.android.html。 除了两者的扩展之外，它还具有本机扩展，可在需要在它们之间共享模块时使用。
Consider a couple of separate button views in the app and the web. We’ll make two various files with the extensions below:
考虑应用程序和网络中的几个单独的按钮视图。 我们将制作两个具有以下扩展名的文件：
button.js (a view of the React button)
button.js(React按钮的视图)
button.native.js (a view of the React Native button)
button.native.js(React Native按钮的视图)
I shared a container component that imports view, such as
我共享了一个导入视图的容器组件，例如
The webpack or any other web bundler will now automatically pick the button.js while making a bundle whereas the button.native.js would be picked by React Native while creating a bundle.
Webpack或任何其他Web捆绑程序现在将在创建捆绑包时自动选择button.js，而React Native将在创建捆绑包时选择button.native.js。
All components can be shared from their app’s repository to a component collection, using Bit (Github). Each component can later be modified or installed separately.
可以使用Bit ( Github )将所有组件从其应用的存储库共享到组件集合。 以后可以分别修改或安装每个组件。
Moreover, when using hooks as reusable logic, the same logic can be used for ReactJS and React Native apps (by sharing these hooks using Bit)
此外，当使用钩子作为可重用逻辑时，可以将相同的逻辑用于ReactJS和React Native应用程序(通过使用Bit共享这些钩子)
应用程式示范(App Demo)
We crafted a POC around it and created a page in the web and app that’s made up of both smart and dumb components. You could find the source code GitHub. We made a seamless page in which you can, for instance, take all your frustration on Thanos by hitting him hard. The structure of the folder would look like this.
我们围绕它设计了一个POC，并在网络和应用程序中创建了一个由智能组件和愚蠢组件组成的页面。 您可以找到源代码GitHub 。 我们制作了一个无缝页面，例如，您可以通过狠狠地打击他来减轻他的所有挫败感。 文件夹的结构如下所示。
Mainly, the page consisted of a header, the main content, and the footer. All the components that should be shared among the web and app are stored under the platform folder. Two components currently, namely ThanosHitButton and ThanosCaption are in the folder.
页面主要由页眉，主要内容和页脚组成。 Web和应用程序之间应共享的所有组件都存储在platform文件夹下。 该文件夹中当前有两个组件，即ThanosHitButton和ThanosCaption。
The latter is a Redux component while the former one is a dumb component. Redux additionally is shared between React JS and React Native. On your mobile, you could run React Native if you download the Expo app.
后者是Redux组件，而前者是哑组件。 Redux另外在React JS和React Native之间共享。 如果您下载了Expo应用程序，则可以在移动设备上运行React Native。
This is how the app will look like in the app and the web:
这是应用程序在应用程序和网络中的外观：
No-logic Component
无逻辑组件
There is a Thanos caption folder within the platform folder.
平台文件夹中有一个Thanos字幕文件夹。
Inside the folder are these:
这些文件夹内有这些：
1. thanosCaptionView.js. Contains the Thanos caption view for the web.
1. thanosCaptionView.js。 包含网络的Thanos字幕视图。
2. thanosCaptionContainerComponent.js. A container component internally imports the platform view that we run code on.
2. thanosCaptionContainerComponent.js。 容器组件在内部导入运行代码的平台视图。
3. thanosCaptionView.native.js. It has the Thanos caption view of the app.
3. thanosCaptionView.native.js。 它具有该应用程序的Thanos字幕视图。
Let’s now check out what’s within the container component
现在让我们检查一下容器组件中的内容
Now let us look inside the ‘thanosCaptionConatinerComponent.js’ container component.
现在，让我们查看“ thanosCaptionConatinerComponent.js”容器组件的内部。
The component seamlessly imports the ThanosCaptionView. Keep in mind that we’re importing from a file that has not specified extension. The right extension would be picked up while making the bundle through react native and webpack.
该组件无缝导入ThanosCaptionView。 请记住，我们正在从未指定扩展名的文件中导入。 通过react native和webpack制作捆绑包时，将选择正确的扩展名。
A bundle that is made up of webpack means that it’s prepared for the web. The ThanosCaptionView would then be automatically picked from the thanosCaptionView.js. On the other hand, if it’s being made by React Native/Expo, it means that it’s being prepared for mobile application, and ThanosCaptionView then from the thanosCaptionView.native.js would be automatically picked.
由webpack组成的捆绑包意味着已为Web准备好了。 然后，将从thanosCaptionView.js中自动选择ThanosCaptionView。 另一方面，如果它是由React Native / Expo制作的，则意味着它正在为移动应用程序准备，然后从thanosCaptionView.native.js中选择ThanosCaptionView。
Let’s take a quick look at the two views.
让我们快速看一下这两个视图。
ThanosCaptionView.native.js
ThanosCaptionView.native.js
The view you see on top is what would be rendered for a mobile application. Simply, it renders Thano’s image.
您在顶部看到的视图就是为移动应用程序呈现的视图。 简单来说，它渲染了Thano的图像。
ThanosCaptionView.js
ThanosCaptionView.js
This is the view to be rendered for the web.
这是要为网络渲染的视图。
逻辑组件 (A Logical Component)
Let’s go now to the other component, the thanosHitButton, which is within the platform folder.
现在让我们转到平台文件夹中的另一个组件thanosHitButton。
We again have three various files under this folder.
我们再次在此文件夹下有三个文件。
hitButtonView.js. Contains the web view.
hitButtonView.js。 包含Web视图。
hitButtonView.native.js. Contains the app view.
hitButtonView.native.js。 包含应用程序视图。
hitButtonContainer.Component.js. It contains the logic, as well as imports view based on the platform where we internally run code on.
hitButtonContainer.Component.js。 它包含逻辑以及基于内部运行代码的平台的导入视图。
Before we visit the container component, let’s check out where the actions and reducers for the component and how the store is initialized in both platforms. All the reducers and common actions are at the folder root shred among mobile and web apps.
在访问容器组件之前，让我们检查一下该组件的动作和化简在哪里以及如何在两个平台上初始化商店。 所有reducer和常见操作都位于移动和Web应用程序之间切碎的文件夹根目录中。
The action thus that hitButtonContainerComponent.js dispatches sits beneath the actions folder that’s at the root of the project. For initializing the store for mobile and web app, we have the same code, which is at the root of the initialzeStore.js project. Below is a code snippet inside that file.
因此hitButtonContainerComponent.js调度的操作位于项目根目录下的actions文件夹下面。 为了初始化移动和Web应用程序商店，我们具有相同的代码，该代码位于initialzeStore.js项目的根目录。 以下是该文件内的代码段。
Index.web.js and App.js now, which is respectively the entry point for web and entry point for the app, call the function the get the store in their respective platforms. Let’s look at both the files.
现在，Index.web.js和App.js分别是Web的入口点和应用程序的入口点，调用该函数以在各自的平台上获取商店。 让我们看看两个文件。
The Index.web.js file
Index.web.js文件
The App.js file
App.js文件
Let’s now see within the hitButtonContainerComponent.js
现在让我们在hitButtonContainerComponent.js中查看
As we see, the action for storing is written in the container component as the Logic to boost the Hit Count and dispatch action. The logic thus and the Redux become common in both React Native and React JS.
如我们所见，用于存储的动作被写入容器组件中，作为增加点击计数和分派动作的逻辑。 因此，逻辑和Redux在React Native和React JS中变得很常见。
Simply, the component imports HitButton. It’s important to keep in mind that we are importing views from a file that is without extension. The correct extension will be picked up while at the same time building a bundle through a webpack and react native.
简单地，该组件将导入HitButton。 重要的是要记住，我们是从没有扩展名的文件中导入视图。 可以选择正确的扩展名，同时通过Webpack构建捆绑包并进行本地响应。
Let’s check out the views.
让我们查看一下视图。
hitButtonView.js
hitButtonView.js
The view above would be rendered for the web. The button that calls the handler would be rendered by the component, passed by the container when the button is clicked by a user.
上面的视图将针对Web渲染。 调用处理程序的按钮将由组件呈现，并在用户单击按钮时由容器传递。
hitButtonView.native.js
hitButtonView.native.js
This is the view rendered for the App. It will render the button that calls the handler that’s passed through a container when a button is clicked on by a user.
这是为应用程序渲染的视图。 当用户单击按钮时，它将呈现调用通过容器的处理程序的按钮。
That’s it for React JS and React Native code sharing.
React JS和React Native代码共享就是这样。
结论 (To Conclude)
We’ve analyzed how it is to be sharing code between React Native and React with various components. In truth, the technique is simple and very effective.
我们已经分析了如何在React Native和React与各种组件之间共享代码。 实际上，该技术非常简单并且非常有效。
学到更多 (Learn More)
翻译自: https://blog.bitsrc.io/learn-to-share-code-between-react-native-and-react-js-14065ce5b0c3
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
