# # #React简介
RN is based on react design, understand react help us develop RN application;
react wants to break down functionality and make development look like building blocks, fast and maintainable
react mainly has the following 3 characteristics:
* As UI (Just the UI)
* Virtual dom (Vsan)
This is the highlight is the most important feature of react to put into memory the least updated view
differential partial updating diff algorithm
* Data Flow (Date flow) One-way data flow
What do you need to know to learn react?
*JSX syntax is similar to XML
*ES6 Related Knowledge
* Front-end base Css+div JS
illustrate the use of react, IDE tools: Webstorm (JavaScript development tools Web front-end development artifact plugin is very rich)
For example: Reactnative Code Smart Reminder (Webstorm)
' git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate '
Download Template: Https://github.com/wix/react-templates Install command
' npm install react-templates-g '
[click to download Webstorm] (https://www.jetbrains.com/webstorm/download/)
[click to download Webstorm hack version] (http://www.cr173.com/soft/130969.html)
1. Example one (simple component and data transfer)
use This.props to point to your own properties
download react Kit from http://facebook.github.io/react/downloads.html
React.js React-dom.js:react's core document
jsxtransformer.js browser.min.js: jsx translation into JS and HTML tools
latest version of react: react-0.14.7
> before react 0.14, browser-side implementation of the JSX compiler dependency Jsxtransformer.js
after react 0.14, the dependent library is changed to Browser.js, and the type of the page script tag is changed from TEXT/JSX to Text/babel
but the above can only be used to test learning react
the production environment needs to compile the jsx into JS beforehand with the help of the compiling tool
For example, you can use node. js to precompile and install the React-tools tool
npm install-g react-tools
<! DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title> React first example </ title>
<script type = "text / javascript" src = "react.js"> </ script>
<script type = "text / javascript" src = "react-dom.js"> </ script>
<script type = "text / javascript" src = "browser.min.js"> </ script>
</ head>
<body>
<div id = "example"> </ div>
<script type = "text / babel">
var HelloMessage = React.createClass (
{
render: function () {
return <h1 style = {{color: ‘# ff0000’, fontSize: ‘24px‘}}> Hello {this.props.name}! I ’m Dongfang Yao </ h1>;
// This is the comment React.createElement
}
}
);
ReactDOM.render (<HelloMessage name = "React Syntax Basics 8" />, document.getElementById (‘example’));
</ script>
</ body>
</ html>
2. Example two (update the view through this.state)
<! DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title> React second example </ title>
<script type = "text / javascript" src = "react.js"> </ script>
<script type = "text / javascript" src = "react-dom.js"> </ script>
<script type = "text / javascript" src = "browser.min.js"> </ script>
</ head>
<body>
<div id = "example"> </ div>
<script type = "text / babel">
var Timer = React.createClass (
{
/ * Initial state * /
getInitialState: function () {
return {secondsElapsed: 0};
},
tick: function () {
this.setState ({secondsElapsed: this.state.secondsElapsed + 1});
},
/ * The component is finished loading * /
componentDidMount: function () {
this.interval = setInterval (this.tick, 1000);
},
/ * Component will be uninstalled Clear timer * /
componentWillUnmount: function () {
clearInterval (this.interval);
},
/ * Render view * /
render: function () {
return (
<div> Seconds Elapsed: {this.state.secondsElapsed} </ div>
);
}
}
);
React.render (<Timer />, document.getElementById (‘example’));
</ script>
</ body>
</ html>
3. Example three (simple application)
<! DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title> The third example of React </ title>
<script type = "text / javascript" src = "react.js"> </ script>
<script type = "text / javascript" src = "react-dom.js"> </ script>
<script type = "text / javascript" src = "browser.min.js"> </ script>
</ head>
<body>
<div id = "example"> </ div>
<script type = "text / babel">
var ShowEditor = React.createClass (
{
getInitialState: function () {
return {value: ‘You can enter text here’};
},
handleChange: function () {
this.setState ((value: React.findDOMNode (this.refs.textarea) .value));
},
render: function () {
return (
<div>
<h3> Enter </ h3>
<textarea style = {(width: 300, height: 150, outline: ‘none’}}
onChange = {this.handleChange}
ref = "textarea"
defaultValue = {this.state.value}
/>
<h3> Output </ h3>
<div> {this.state.value} </ div>
</ div>
);
}
}
);
React.render (<ShowEditor />, document.getElementById (‘example’));
</ script>
</ body>
</ html>
### React Native Introduction and Code Analysis
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
‘use strict‘;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from ‘react-native‘;
class DongFang extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!东方耀的第5课
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
},
welcome: {
fontSize: 20,
textAlign: ‘center‘,
margin: 10,
},
instructions: {
textAlign: ‘center‘,
color: ‘#333333‘,
marginBottom: 5,
},
});
AppRegistry.registerComponent(‘DongFang‘, () => DongFang);
### Why use React Native
How to strike a better balance between development costs and user experience?
Many times, the front end has an optimistic idea: H5 can replace native applications
RN can not only use the front-end development mode to develop applications, but also call the UI components and APIs of native applications
## 2 、 Supporting video (): https://yunpan.cn/cY4JX8Aj5Vr9Y Access password 413d
2.Teach React Native from React to RN
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
