react native expo

// Import some things from React Native that we will use in the app import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

// Here begins the app export default class App extends React.Component {

// The constructor is used to start the app with some information constructor(props) { super(props);

// Here we create a variable called counter
// It starts with 0 cookies
this.state = {
  counter: 0,
};

}

// This function is used when the person clicks on the cookie clickOnCookie = () => {

// Increases the counter by 1
// That is, each click gets 1 more cookie
this.setState((prevState) => ({
  counter: prevState.counter + 1
}));

};

// This function calls the click on cookie function clicks = () => { this.clickOnCookie(); };

// Here is the visual part of the app render() { return (

  // View is like a box that organizes the elements on the screen
  <View style={styles.container}>

    // This part shows the title and the number of cookies
    <View style={styles.placardPanel}>

      // Shows the name of the game
      <Text style={styles.title}>Cookie Clicker</Text>

      // Shows how many cookies the person has gotten
      // The number comes from the counter variable
      <Text style={styles.counter}>
        {this.state.counter} cookies
      </Text>

    </View>

    // This is the area where the cookie is located
    // When you click on it, it increases 1 cookie
    <TouchableOpacity
      onPress={this.clickOnCookie}
      activeOpacity={0.6}
      style={styles.cookieArea}
    >

      // Here appears the cookie emoji
      <Text style={styles.cookieEmoji}></Text>

    </TouchableOpacity>

    // This is the button written "click"
    // When you click on it, it also increases the counter
    <TouchableOpacity
      style={styles.button}
      onPress={this.clicks}
    >

      <Text style={styles.buttonText}>click</Text>

    </TouchableOpacity>

  </View>
);

} }

// Here begin the app styles const styles = StyleSheet.create({