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/