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

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>
  );
}

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