Links and differences between Reactjs and react native

The purpose of 1,react JS is to make the V layer of the front end more modular and better reusable, it can use simple HTML tags to create more custom component tags, internal binding events, but also let you free from the operation of the DOM, only need to manipulate the data will change the corresponding DOM.
The purpose of 2,react native is that we can use the front-end technology stack to create a framework that can run on different platforms. You can create apps that run on the mobile side, but the performance may be almost as close to the soundtrack app.
The principle of 3,reactjs and react native is the same, it is the virtual DOM implemented by JS to drive the interface view layer rendering. Just Reactjs is driving the HTML DOM rendering; React native is the driver Android/ios native component rendering.
4,react is based on component (component) development, and then between components and components through the props delivery method, each component has a state, and when a method changes the state value, the entire component is redrawn to achieve a refresh. In addition, when it comes to redrawing to mention the virtual DOM, is to use JS to simulate the DOM structure, and so the entire component of the DOM updated, just render to the page, simply to update the changes compared to the previous part, rather than all refresh, so the efficiency is very high.

Virtual DOM mechanism: A set of DOM APIs implemented in JavaScript at the browser end. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM. and react can batch process virtual DOM refreshes, and two data changes within an event loop will be merged.

React native offers three benefits over standard web development or native development:
1. Gesture Recognition: Mobile applications built on Web-based technology (HTML5/JAVASCRIPT) are often complained of lack of timely response. The native UI-based react native avoids these problems to enable real-time response.
2. Native components: Components implemented using Html5/javascript are always a little less than native components, while react native naturally does not have this problem due to the native UI component.
3. Styles and layouts: IOS, Android, and web-based apps each have different styles and layout mechanisms. React native implements a consistent cross-platform style and layout across all mobile platforms through a Flexbox-based layout engine.

H5 (hybrid), React Native, Native analysis
React native came at the right time, one because H5 to a certain extent, and the second is the rapid rise of the mobile market emphasizes the rapid response and iteration of the team; The third is the user's experience is magnified, the user demands the ultimate pleasure. React native combines the advantages of a Web layout with Flexbox and jsx and native native components.
1. User experience for native apps
2. Cross-platform features
3, developer single technology stack
4, easy to get started
5. Community Prosperity

React native-android Environment Building (Windows)
1. Install "JDK SDK Node Git" and configure path
Note that the SDK to install API23 above, because react native compiled Android will use the Gradle Automation construction tools, gradle requirements sdk-api23 above.
Install Android support libraries and Android support Repository. Android SDK Platform-tools 24 version returns unable to detect ADB version replaced with 23 Adb.exe.
2. Installation of react-native Scaffolding
NPM install-g REACT-NATIVE-CLI
3. Create a react-native project
React-native Init Helloproject
4. Enter the engineering catalogue
CD Helloproject
5. Installation Project Dependency Package
NPM Install
6. Generate JS Bundle
React-native start
The browser enters the link to verify that the project is starting normally.
Http://localhost:8081/index.android.bundle?platform=android
7. Build the APK and install it on the phone
React-native run-android
8. Shake your phone, click on dev Settings, click Debug Server Host & port for device, set IP and ports.
9. After the setup is complete, go back to the blank page, shake the phone again, choose Reload JS, the program will run up.
10.Debug Commissioning
10.1.http://192.168.1.100:8081/index.android.bundle?platform=android&dev=true&hot=false&minify= false:3388
10.2.http://localhost:8081/debugger-ui
10.3.ADB Reverse tcp:8081
ADB Andorid Debug Bridge
"Client side is used to send the ADB command; The Deamon daemon runs on the debug device; the server side manages communication between the client side of the PC and the deamon of the phone."
Common commands:

adb devicesadb logcat     adb install/uninstall  adb pull/push  adb start/kill-server  

The shell interface of the ADB shell into the debug device
Remotely connect via WiFi phone to debug: adb connect/disconnect Mobile ip:port[need to open ADB service on the phone].
Debug by turning on remote debug mode with USB connection.

adb shell am start <intent adb="" shell="" am="" force-stop="" <package="" pm="" list="" packages="" permissions="" features="" screencap="" sdcard="" screen.png="" screenrecord="" dumpsys="" input="" keyevent="" 26="" 82<="" code="">

Reactjs
Simple: Just express what your application should look like at any point in time.
Declarative: After the data changes, the React will only update the changed parts.
Building Composable Components: Making code reuse, testing, and separation of concerns easier.
React subversion of the traditional core

Responsive updates
A component is like a function

JSX Grammar Javascript+xml
No JSX React.
1, react.createelement to create a tree. The first parameter is the label, the second argument is a Property object, and the third is a child node.
2. Create a shorthand factory method based on a custom component.
3. React has provided built-in factory methods for HTML tags.
Inserting HTML entities into the JSX text
To prevent various XSS attacks, React will escape all strings by default.

1.最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。

{' First \u00b7 Second '} {' First ' + string.fromcharcode (183) + ' Second '}

2. Mix strings and JSX elements in arrays

{[' First ', *, ' Second ']}

3. Direct use of the original HTML

Automatic binding and Event proxy: React does not actually bind the event handler to the node itself. When React is started, it uses the only event listener on the outermost layer to handle all events. When the component is loaded and unloaded, only the event handler is added or removed in the internal mapping. When an event is triggered, React depends on the mapping to determine how to distribute it.
State how it works: the usual way to notify React data changes is to call SetState (data, callback). This method merges (merge) data to This.state and re-renders the component. After rendering is complete, invoke the optional callback callback. It is not necessary to provide callback in most cases, as React will be responsible for updating the interface to the latest state.

JSX converted to standard JavaScript

1. Online 2-Greact---watch src/build/3. Pre-compiled basic-jsx--G babel-CLINPM Install Babel-preset---presets react--out-dir=build

The watchify is a browserify package, and its configuration in Packages.json is exactly the same as browserify without changing the "browserify" field name. Therefore, after installing the watchify, you do not even have to modify browserify existing configuration, directly execute Watchify x.js-o x.out.js.

Python has a simple HTTP server built-in that only needs a single line of command at the command line, and an HTTP server is up, which sets the current folder as the default Web directory.
Python-m Simplehttpserver

Libraries: React.js, React-dom.js, and browser.js, which must be loaded first. Among them, React.js is the core library of react, React-dom.js is to provide DOM-related functions, the role of Browser.js is to convert the JSX syntax to JavaScript syntax, this step is very time-consuming, in fact, the line should be placed on the server to complete.
1. Reactdom.render is the most basic method of React for converting a template to an HTML language and inserting a specified DOM node. Reactdom.render is the most basic method of React for converting a template to an HTML language and inserting a specified DOM node.
2. React allows the code to be encapsulated as a component (component) and then inserted into a Web page like a normal HTML tag. The React.createclass method is used to generate a component class. All component classes must have their own render method for the output component. Note (the first letter of the component class must be capitalized, otherwise it will be an error; The component class can contain only one top-level label, otherwise it will error.) The usage of the component is exactly the same as the native HTML tag and can be arbitrarily added to the attribute, for example, the HelloMessage component adds a Name property with a value of John.
3, the properties of the component can be obtained on the This.props object of the component class, such as the Name property can be read by This.props.name. To add component properties, one place to note is that the class attribute needs to be written as ClassName, and the for property needs to be written as htmlfor because the class and for are reserved words for JavaScript.
4. The Proptypes property of the component class is used to verify that the properties of the component instance meet the requirements.
5, sometimes need to get the real DOM node from the component, then use the ref attribute, This.refs. [RefName] will return this true DOM node.
6, the This.setstate method modifies the state value, after each modification, automatically calls the This.render method, renders the component again. Because both This.props and this.state are used to describe the characteristics of a component, confusion can occur. A simple way to differentiate is that This.props represents features that are not changed once defined, whereas This.state is a feature that changes as the user interacts.
7, Component life cycle mounting: Inserted real dom;updating: is being re-rendered; Unmounting: The real DOM has been removed.
8. The'll function is called before it enters the state, and the DID function is called after it enters the state

Componentwillmount () Componentdidmount () componentwillupdate (object Nextprops, Object nextstate) Componentdidupdate (Object Prevprops, Object prevstate) Componentwillunmount () Componentwillreceiveprops (object Nextprops)//shouldcomponentupdate (Object Nextprops, Object nextstate)//

9. Development process
First step: Split the user interface into a component tree
Step two: Use React to create a static version of your app
Step three: Identify the smallest (but complete) state that represents the UI
Fourth step: Confirm the life cycle of the state
Fifth step: Add reverse Data flow

Links and differences between Reactjs and react native