ReactNativeについて少し調べてみた

4903 ワード
JavaScript reactnative JavaScript テキストリンク

ReactNativeとは？

  • Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワーク
  • 言語としてJavaScriptを使用
  • JSXというXMLシンタックスなライクな書き方ができる
  • PropsとStateでデータを扱う

JSXとは？

JSXはJavaScriptにXMLライクのシンタックスを追加する言語拡張です。
JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。

JSX
<View>
  <Text>Hello world!</Text>
</View>

Propsとは?

  • コンポーネントと外部で値をやり取りするためのインターフェイス
  • コンポーネントに必要な値を受け取ることができる。
  • 状態によって値が変わるようなものはStateに任せるため、Propsはimmutableで変更してはいけません。
props
class Greeting extends Component { 
  render() {
    <div>
      <Hello name="react" />
      <p>Happy hacking!</p>
    </div>
  }
}

const Hello = (props) => {
  return <p>Hello, {props.name}!</p>;
}

Stateとは?

  • コンポーネントの状態を表す値を保管するものになります。
  • これは、コンポーネントの現在の状態を扱うためのものです、つまりStateの値を操作することでコンポーネントの状態を操作します。
  • コンポーネントの表示の変更など必須とも言える機能になります。

まずはconstructorで値を初期化します。
初期化したStateは「this.state.〜」で扱うことができます。

state
constructor(props) {
  super(props);
  this.state = {
    value1: 'foo',
    value2: [ 'bar', 'baz' ],
  };
}

render() {
  return (
    <div>
      <h1>{this.state.value1} </h1>
    </div>
  );
}

今回はここまで
また調べたら投稿していきたいと思います。

常用matplotlib.pyplotプロットシリーズ(グループ)
C++実習18 IPアドレス