The things that Reactjs and react native.

Introduced
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 Tradition: Give it five minutes
* * I used to be a impatient man a few years ago. Whenever someone says something, I think I'm going to disagree. If I disagree with my worldview, I'll try to fight back.
* * It's like I have to be the first person to have a point of view-it seems like the first one means something. But what it really means is that I didn't think about it carefully. The faster you react, the less you think. Not always, though, but often.
* * It's easy to talk about knee reflexes as if they were just something that happened to someone else. You have, actually. If your neighbour can't avoid it, so do you.
* * This problem becomes more serious when it is in 2007 years. I spoke at the Business Innovation Factory meeting in Providence, Rhode Island, Richard Woman. After my speech, Richard came to introduce himself and praised my speech. He is really generous. Of course he could not do that.
* * But what did I do? I refuted what he said. When he made his point on the stage, I was busy keeping track of the views I disagreed with. When I had the chance to talk to him, I quickly refuted some of his ideas. I must look like a jerk.
* * His answer changed my life. It's a simple thing. He said: "Give it 5 minutes." I asked him what he meant. There is a good objection, there is a good argument, a strong opinion and a better faith, but please give them some time before you are sure to oppose my point of view. "Five minutes" stands for "thinking", not reaction. He was perfectly right. And I'm talking about trying to prove something, not learning something.
* * This is a big moment for me.
* * Richard used his career to think about these issues. It took him 30 years. And I only spent a few minutes. Now, of course he may be wrong, I may be right, but it's best to think deeply before you know you're right.
* * There is a difference between the question and the rebuttal. Rebuttal means you think you already know. Asking questions means you want to know. Want to ask more questions.
* * Learning to think first instead of reacting quickly will be a lifelong quest. It is difficult. Sometimes I still have a hot head when I shouldn't. But I really enjoyed the benefits of my improvement.
* * If you don't know why this is important, think of Josena Aivy's reverence for Steve Jobs: Just as Steve loves design and makes things, he treats the creative process with great respect.
* * You see, I think he knows better than anyone. When a point is finally so powerful, they start to become vulnerable, difficult to form an idea, easily missed, easily compromised, and easily squashed. That's very esoteric. The view is fragile. They usually have a weak start. They are almost nonexistent and are easily overlooked or missed.
* * There are two things in the world that need no technical content: 1. Spend someone else's money 2. Ignoring a point of view
Ignoring one view is easy because it doesn't involve any work at all. You can laugh at it. You can ignore it. You can spit on it. That's easy. The hard part is to protect it, consider it, immerse it, explore it, repeat it, try it. The right idea can also be used as the wrong idea to start a life.
* * So next time you hear something, or someone, talk about an opinion, give an opinion, or make a point, give it 5 minutes. Before refuting, saying too hard or too much work before considering it. These things may be correct, but there may be another truth: it may be worthwhile.

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. Use the original HTML directly

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.在线2.离线npm install -g react-toolsjsx --watch src/ build/3.预编译basic-jsx-precompilenpm install -g babel-clinpm install babel-preset-reactbabel example.js --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)//Called when the loaded component receives a new parameter
Shouldcomponentupdate (Object Nextprops, Object nextstate)//component is called when determining whether to re-render.
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

The things that Reactjs and react native.