出認識React Native仮想DOMノード及びAPI

2195 ワード

Reative Nativeは、ソーシャルネットワークの有名なフェイスブック傘下の仮想VirtualインタラクションをNativeインタラクション層に効率的にインタラクションするView層の枠組みを実現するために、仮想DOM UIを通じてNative UIに変換し、JSXを通じてJavascript,IOS,Android原生開発言語のインタラクションを実現し、橋(Bridge)の役割を果たします.
プラットフォームをまたぐことはできませんが、各プラットフォームでそれぞれのコードを実現できます.
学習サイト:
React Nativeオフィシャル文書中国語版
React Native
React Native Githubアドレス
サンプルコード
html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.min.js"></script>
  <script src="../build/jquery.min.js"></script>
  <script type="text/babel" src=js/app.jsx>
  </script>
</head>
<body>
<div id="example">
</div>
</body>
</html>

JSX

class RepoList extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      loading: true,
      error: null,
      data: null
    }
  }
  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  }
  render() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
}
ReactDOM.render(
  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.body
);

私のJavaScript学習の道