React Native & Android & iOS

React Native & Android & iOS

https://facebook.github.io/react-native/

https://facebook.github.io/react-native/docs/getting-started

https://github.com/facebook/react-native

# Xcode & Android Studio# Watchman is a tool by Facebook for watching changes in the filesystem.$ brew install watchman$ npm i -g react-native-cli# OR$ yarn global add react-native-cli

yarn & global

https://yarnpkg.com/zh-Hans/docs/cli/add

https://yarnpkg.com/zh-Hans/docs/cli/global

0.59.0

Latest release

https://github.com/facebook/react-native/releases

$ react-native init AwesomeProject# Using a specific version$ react-native init AwesomeProject --version X.XX.X$ react-native init AwesomeProject --version react-native@next

$ react-native init demo_app$ react-native init demo_app  --version 0.59.0$ react-native init demo_app  --version react-native@next

iOS & Android

# iOS$ cd demo_app$ react-native run-ios# OR$ cd demo_app && react-native run-ios# Android$ cd demo_app && react-native run-android

React Native Tutorial

https://www.tutorialspoint.com/react_native/index.htm

https://www.tutorialspoint.com/react_native/react_native_tutorial.pdf

https://www.raywenderlich.com/247-react-native-tutorial-building-android-apps-with-javascript

https://www.toptal.com/react-native/cold-dive-into-react-native-a-beginners-tutorial

https://school.shoutem.com/lectures/build-react-native-mobile-app-tutorial/

React

demo

https://jscomplete.com/repl/

"use strict";/** * * @author xgqfrms * @license MIT * @copyright  React Refs * @description * @augments * @example * */import React, { Component, PureComponent } from "react";import ReactDOM from "react-dom";import PropTypes from "prop-types";class ReactInput extends React.Component {    render(props) {        return (            
    
                
                     {/* 
      */}                
     {this.props.message}            
    
        );    }}class ReactRefs extends React.Component {    constructor(props) {        super(props);        this.state = {            inputA: "aaa",            inputB: "bbb",            inputC: "ccc",        };        this.updateValueA = this.updateValueA.bind(this);        this.updateValueB = this.updateValueB.bind(this);        this.handleInput = this.handleInput.bind(this);    }    updateValueA(e) {        this.setState({            // inputA: this.refs.a.value,            inputA: e.target.value,            // e.target === this.refs.a        });    }    updateValueB() {        this.setState({            inputB: this.refs.b.value,            // this.refs.b        });    }    handleInput() {        this.setState({            inputC: this.c.refs.input.value,            // this.c === components (ReactInput)        });    }    render() {        return (            
    
                
     
{this.props.name}
                
     
                    
       this.updateValueA(e)} />                    
      {this.state.inputA}                
     
                
     
                    
                          
      {this.state.inputB}                
     
                
     
       this.c = component}                    onChange={this.handleInput}                    message={this.state.inputC}                />            
     
    
        );    }}ReactRefs.defaultProps = {    name: "xgqfrms",};ReactRefs.propTypes = {    name: PropTypes.string.isRequired,};export {ReactInput, ReactRefs};export default ReactRefs;ReactDOM.render(
    , mountNode);

React and Redux

https://learn.freecodecamp.org/front-end-libraries/react/

https://learn.freecodecamp.org/front-end-libraries/redux/

https://learn.freecodecamp.org/front-end-libraries/react-and-redux/

---

https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first

"use strict";/** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @created 2019-01-01 * * @description react-redux * @augments * @example * */import React, { Component, PureComponent } from "react";// import ReactDOM from "react-dom";// import PropTypes from "prop-types";// class DisplayMessages extends Component {class DisplayMessages extends React.Component {    // change code below this line    constructor(props) {        super(props);        this.state = {            messages: [],            input: "",        };        this.handleChanget = this.handleChange.bind(this);        this.submitMessage = this.submitMessage.bind(this);    }    // add handleChange() and submitMessage() methods here    handleChange(e) {        this.setState({            // input: this.refs.a.value,            input: e.target.value,            // e.target === this.refs.a        });    }    submitMessage() {        let {            input,            messages,        } = this.state;        // messages.push(input);        // console.log(`messages =`, JSON.stringify(messages, null, 4));        let new_messages = [...messages, input];        console.log(`new_messages =`, JSON.stringify(new_messages, null, 4));        this.setState({            input: "",            // messages: messages,            messages: new_messages,        });    }    // change code above this line    render() {        let {            input,            messages,        } = this.state;        return (            
    
                
     
Type in a new Message:
                { /* render an input, button, and ul here */ }                {/* 
      this.handleChange(e)} /> */}                
      this.handleChange(e)} />                
     click                
     
                          {                        messages.map(                            (item, i) => {                                return 
      
{item}
;                            }                        )                    }                
     
                { /* change code above this line */ }            
    
        );    }};

help

refs

https://zh-hans.reactjs.org/docs/error-decoder.html/?invariant=254&args[]=a

https://fb.me/react-refs-must-have-owner

https://reactjs.org/warnings/refs-must-have-owner.html

update state & ...arr

https://www.freecodecamp.org/forum/search?q=manage-state-locally-first

https://www.freecodecamp.org/forum/t/manage-state-locally-first-having-trouble/192075

https://www.freecodecamp.org/forum/t/manage-state-locally-first/190958

https://www.freecodecamp.org/forum/t/manage-state-locally-first/245357

---

React Native 中文文档

0.59

https://reactnative.cn/docs/

Android SDK