Reactができるようになったぞー

Reactをやりましょう

はい、おはようございます。本日はお金とか一切もらってないし課金とかもしていないのになぜか利用してしまっているProgateの宣伝でもしていこうと思います。なんとReactの講座ができました。なーので早速やっていきたいと思いま……

終えました。

おわりっ!!

終えたからReact Nativeをやりましょう

まあ終えましたで終わらせてもおべんきょにならないのでちゃんとソースコードも載せていきたいと思います。それで……、やはりReactを終えてからやることと言ったらReact Nativeだと思います（？）。えー、そんなわけでReact Nativeを完全に理解してしまった（大嘘）僕がレッスン１の内容をReact Nativeで書きなおしていきたいと思います。やはり時代はネイティブアプリですもんね。

Progateのやつ終了するとこんなカウントアップアプリ作れるようになります。

以下 App.js クソコード

import React from 'react';
import { StyleSheet, Text, Button, View } from 'react-native';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {count: 0};
  }

  handleClick(){
    this.setState({count: this.state.count+1});
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.txt}>{this.state.count}</Text>
        <View style={styles.btn}>
        <Button
          onPress={this.handleClick.bind(this)}
          title="+"
          color="#6cf"
          accessibilityLabel="Click"
        />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 200,
    backgroundColor: '#fff',
    alignItems: 'center',
    //justifyContent: 'center',
  },
  txt:{
    fontSize: 64,
    fontWeight: 'bold',
  },
  btn:{
    marginTop: 32, 
    width: 200,
    height: 48,
  }
});

thisの挙動よくわかんなくなって、bindしないと怒られるようになって微妙に手間取ったのはここだけの秘密。

参考
Getting Started · React Native