【React】学習記録（１）

React学習の日々の学びをアウトプットします。

状態

■学習教材：Progate　React学習コース
■学習目的：React nativeを利用してAndroid,iOSで両方使えるアプリを作れるようになる
■学習レベル：学習１日目
■プログラミング学習歴：６ヶ月
■プログラミングスキル：
初心者
java scriptの基本的文法学習済
ruby on railsでwebアプリが作れる
swiftで簡単なiOSアプリを作れる

React基本形

sample.js

import React from 'react';

class App extends React.Component {
 render() {
//JSでのコメント
   return (
{/* JSXでのコメント　*/}
      <div>
       <h1>Hello World</h1>
       <p>Study React</p>
     </div>
   );
 }
}

export default App;

・その中はJSX（HTMLのようなもの）で表記されている
・return内は1つの要素にまとめる必要あり

その他お約束

sample.js

import React from 'react';

class App extends React.Component {
 render() {
const text = 'Hello World'
   return (
      <div>
      {/*JSX内では{}でJSが表記できる*/}
       <p>{text}</p>
     </div>
   );
 }
}

export default App;

イベントについて

sample.js

<button イベント名={()=>{処理}}></button>

()=>{処理}の部分がJSのアロー関数のため、{}で囲む必要あり
アロー関数についてはこちらから

Stateについて

ユーザーの動きによって変わる値をstateと呼ぶ
stateは、constructorの中で、オブジェクトとして定義する

sample.js

constructor(props) {
    super(props);
//this.state = {プロパティ名:値}
    this.state = {name:'Hi！'}
  }

//stateの変更
//this.setState({プロパティ名: 変更する値})
this.setState({name: 'Hello!'})

メソッドについて

sample.js

constructor(props) {
    super(props);
    this.state = {name: 'Hi！'};
  }

  // メソッドを定義
  Click(name){
    this.setState({name: name});
  }
.
.
.
//this.メソッド名()とすることで、イベント内でメソッドを呼び出す
<button onClick={() => {this.Click('Hello')}}>Hello</button>