[react]簡単なカウンタアプリケーションの作成

スパルタエンコーディングクラブのアプリケーション開発に加えて最初の週の授業を終えた日は、毎週宿題で終わり、私はほとんど宿題の解説を見ていました...ほほほ何も知らずにコードした.
しかし、総合クラスを聞いたから来たのか、どのファイルを追加すればいいのか、どこに追加すればいいのか分からない.どんなコードを入れるべきかまだ分かりませんが、この点の進歩にも感謝します.
構成部品フォルダにプラス記号とマイナス記号ファイルを追加し、Appとjsxでカウント状態を変更すれば...
今でも命令語を使うのは気まずいので、それに従う必要がありますが、続けていくといつか慣れてしまいます...
+++MinusButton.jsx

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

export default function MinusButton({ Minus }) {
  return (
    <TouchableOpacity onPress={Minus} style={styles.container}>
      <Text> Minus </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'green',
    width: 50,
    height: 50,
  },
});

+++PlusButton.jsx

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

export default function MinusButton({ Plus }) {
  return (
    <TouchableOpacity onPress={Plus} style={styles.container}>
      <Text> Plus </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'yellow',
    width: 50,
    height: 50,
  },
});

+++App.jsx

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Alert, ScrollView } from 'react-native';
import PlusButton from './components/PlusButton';
import MinusButton from './components/MinusButton';

export default function App() {
  const [state, setState] = useState(0);

  const Minus = () => {
    console.log('마이너스');
    setState(state - 1);
  };

  const Plus = () => {
    setState(state + 1);
  };

  return (
    <View style={styles.contianer}>
      <Text style={styles.count}>카운터 : {state}</Text>
      <View style={styles.buttonContainer}>
        <PlusButton Plus={Plus} />
        <MinusButton Minus={Minus} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  contianer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  count: {
    fontSize: 20,
    margin: 10,
    padding: 10,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#000',
    borderStyle: 'dotted',
  },
  buttonContainer: {
    marginTop: 50,
    flexDirection: 'row',
  },
});

このようにplusボタンを押すと1が増加し、減算ボタンを押すと1が減少します.
本当に不思議なコードです...このすべてを可能にする反応と万博への感动...
目で确かめる変速定周波数にも感动しました.
今から来週の講義に出発~!