React Native & Android & iOS

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 (
            <div>
                <input type="text" onChange={this.props.handleInput} />
                {/* <input type="text" ref="c" onChange={this.props.handleInput} /> */}
                <code>{this.props.message}</code>
            </div>
        );
    }
}

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 (
            <section>
                <h1>{this.props.name}</h1>
                <div>
                    <input type="text" ref="a" onChange={(e) => this.updateValueA(e)} />
                    <code>{this.state.inputA}</code>
                </div>
                <div>
                    <input type="text" ref="b" onChange={this.updateValueB} />
                    <code>{this.state.inputB}</code>
                </div>
                <ReactInput
                    ref={component => this.c = component}
                    onChange={this.handleInput}
                    message={this.state.inputC}
                />
            </section>
        );
    }
}

ReactRefs.defaultProps = {
    name: "xgqfrms",
};

ReactRefs.propTypes = {
    name: PropTypes.string.isRequired,
};

export {ReactInput, ReactRefs};
export default ReactRefs;

ReactDOM.render(<ReactRefs />, 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 (
            <div>
                <h2>Type in a new Message:</h2>
                { /* render an input, button, and ul here */ }
                {/* <input type="text" ref="a" onChange={(e) => this.handleChange(e)} /> */}
                <input type="text" value={input} onChange={(e) => this.handleChange(e)} />
                <button onClick={this.submitMessage}>click</button>
                <ul>
                    {
                        messages.map(
                            (item, i) => {
                                return <li key={i}>{item}</li>;
                            }
                        )
                    }
                </ul>
                { /* change code above this line */ }
            </div>
        );
    }
};

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