Analysis of the concept of the ReactWeb library of JavaScript and the manual guide _ others

This article mainly introduces the concept analysis of the ReactWeb library of JavaScript and the manual guide. The purpose of ReactWeb is to convert the local ReactNative application project into a Web application, for more information about the purpose and significance of React Web, it is very clear: let the React Native code run on the Web and let a set of code run on various mobile terminals. for front-end and business, this is a qualitative improvement in development efficiency. At the early stage of the project, we also consulted the React team about similar issues. @ vjeux, the core member of their team, also thought this was a cool thing and something they wanted to do in the future. Maybe React Web will be released when React Native for Android is released. (YY)
Technical Architecture
React Native-based adaptation solutions include:
1. Develop a Bridge standard. RN and RW each use the best way to achieve this standard.
For example, based on the Flex layout, we implement a set of consistent Flex Component, , .
2. fully align with RN, and RW implements all the APIs that can be implemented by RN.
During the discussion, the latter was selected.
Because of the concept of React Web and the running of React Native code on the Web end, it is determined that RW is only a build and packaging tool. Unlike RN, RW implementation does not have much meaning, then the overall technical direction is very clear: to implement the RN consistent Style, Component and API, and finally compile it into a web version through the build tool.

Example

Let's take a look at the React Web project creation process:
Step 1: install and configure React web
In this step, install the react-web package and related dependencies, and configure the webpack packaging script.
To simplify this step, we developed the command line tool react-web-cli, which only needs to execute two lines of commands. The command line tool also supports debugging servers, packaging, and other functions.
Install the cli tool:

npm install react-web-cli -g

Install and configure React web:

React-web init
   <当前项目目录>

After the execution is complete, the npm install related libraries under your project directory, and automatically create the web/webpack. config. js file, which contains a written configuration. The directory structure is as follows:

.├── README.md├── android/├── index.android.js├── index.ios.js├── ios/├── package.json└── web/ └── webpack.config.js

Step 2: Add and configure the entry file
Each project requires an entry file, which is usually used to call other components and initialize the project. For example, index. ios. js indicates the entry file of the project on the iOS platform. To comply with the React Native File naming rules, we create an index. web. js file as the entry file, and specify this file as the entry file in webpack. Open the web/webpack. config. js file and modify the config variable:

var config = { paths: { src: path.join(ROOT_PATH, '.'), index: path.join(ROOT_PATH, 'index.web'), },};

Then we create the index. web. js file. This file is actually very similar to index. ios. js, but slightly different. The main difference is that iOS only needs AppRegistry. registerComponent ('awes', () => Awes); this allows Xcode's Native code to receive and process your JS Code, while the Web side can only be used after being inserted into the DOM node. Therefore, we need to add the following code at the bottom of index. web. js:

AppRegistry.registerComponent('Awes', () => Awes);if (Platform.OS == 'web') { var app = document.createElement('p'); document.body.appendChild(app); AppRegistry.runApplication('Awes', { rootTag: app });}

Then, the Platform component needs to be introduced in the require section at the top. This completes the configuration. You can run the react-web start command to start the debugging server!

You can try to modify it as needed, and the experience in the React Native simulator is almost the same.
Step 3: Test and package the Web version code
After you finish the modification and development, and test the Web end, you can package and release it. The command for packaging react-web-cli tool is:

react-web bundle

After packaging, the file is stored in the web/output/directory. You can directly open index.html (if the app has a request, you need to check it on the local server ), check again to publish it.
What happened in this process?
Curious students may have some questions about what the above command line tool has done? Why does React web package the React Native code for the Web? Is React web secure and reliable? What is in it?
Here is a brief introduction to the implementation principle of React web and the actual work done in the above steps.
React Web implements the React Native component on the Web end.
React separates the code from the platform environment and adds a layer to the layer so that developers can perform some processing at the platform environment level to adapt the same code to more platform environments.
For example, react-canvas writes code according to the React syntax and performs some processing at the platform environment level (it runs your React code and renders it with canvas ), then achieve specific goals (improve performance on the Mobile End ).
In React Native, a piece of code can run on both iOS and Android. The React Native team has done some processing on the Native app of the corresponding platform, so that it can parse the code that executes the React syntax.
There are also homogeneous (isomorphic) applications. The server uses React + Node. js to generate HTML, and the client uses React to obtain client-side interaction and functions.
To this end, the React v0.14.x version has been specially divided into two libraries: react and react-dom. In fact, the special processing on the browser platform has been removed and changed to the react-dom library separately.
The special feature of React Native is that the underlying implementation of components is Native, so labels such as span and p are not supported. However, animation directly calls Native for interface rendering. Therefore, Web terminals are not supported, but most components can be simulated using Web technologies. Animations can be simulated with CSS 3, basic elements, layout, and compatibility issues with equivalent HTML tags. CSS can be used for processing, therefore, React web only needs to re-implement the React Native component using Web technology. With React, a code can be run on multiple platforms.
For example, the Text component:
The implementation of React Native calls a lot of underlying code implementation of React Native.
For the Web end, you can use tags to output a line of text, so the React web implementation directly creates a tag and binds some events and so on.
You can use the React Native component that can run in the UI Explorer demo with peace of mind.
Webpack helps you switch packaging targets
If a Web-compatible component is made, wouldn't you replace all the require ('react-native ') components to require ('react-web') during packaging ')? Otherwise, how can I package my Web components?
The powerful webpack with the alias configuration item can help you solve this problem:

resolve: { alias: { 'react-native': 'react-web', 'ReactNativeART': 'react-art', }, extensions: ['', '.js', '.jsx'],},

In this way, all the places where require ('react-native ') are replaced with react-web packages, while the react-web module. the consistency between exports and react-native allows the code to work without replacement.
In addition, you can use the plug-in to implement another method. See the following.
Use the Haste method to introduce components to improve performance
Webpack and other packaging tools that support CommonJS specifications will package all the require components in the file. For React Native, the code size does not matter, but for Mobile web, it is a little more important. Especially if your project only needs Text components, but all the components are packaged in the results of require ('react-web'), it is quite sad.
Based on the webpack plug-in, you can also use another method to introduce components to solve this problem. You can call it the Haste method. To use this method, you need to load the webpack plug-in haste-resolver-webpack-plugin. The default webpack configuration has been loaded for you. You can directly use it in the component as follows:

var Text = require('ReactText');

Instead of the previous one:

var {Text} = require('react-native');

In this way, when a webpack is packaged, the content of the former component is only packaged, which can reduce the volume and improve the performance. How is this implemented?
When packaging a webpack with a plug-in loaded, all components are scanned and the information of @ providesModule in the component header (such as the Text component information) is read. Then, when the component name is require in other files, the file is automatically located for packaging. At the same time, the platform can be differentiated. Even if it is the same name, the platform will be differentiated during packaging to package the corresponding files (according to the index. xxx. js naming rules ).