2, hands-on teaching react native actual combat from react to RN

Source: Internet
Author: User


# # #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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.