Exercise 01 : React Basics

Purpose and learning process

In this exercise you will learn the basics of the React development:

using and rendering build-in components
understand state and props
event handling
using styles

Note

It is good to test your React skills before you are starting real React Native exercises. Remember browse/learn React and React Native materials before you are doing these small practice exercises.

Repository

Remember that you will need to use mobile-exercises repository and save your work inside it. If you haven't cloned mobile-exercises repository to your local computer, then read and follow Exercises Info material first!

How to work

Move Exercise 1 issue to Doing in your repository Issues Board
Create ReactBasics folder to your mobile-exercises repository (in local computer)
Create all of these small exercises with Snack Expo with React Native syntax
Save screenshot, where is your code and app view visible, to your ReactBasics folder
Learn React Basics from here React Native - Getting Started

Practice 1 - States and event handling

Create an application where user can increase/decrease value by pressing a Button components (change some other button colors to your solution). Value is visible in Text component.

Help - first try to code it by yourself

Create state for click count and modify it from functions, which will be called from button event handling.

More help - first try to code it by yourself

Import needed libraries:

// Import React and useState from react library
import React, { useState } from 'react';
// Import needed UI elements
import { Text, View, StyleSheet, Button } from 'react-native';
// Import constrants from expo
import Constants from 'expo-constants';

Modify default application with your own UI

// default application, which will be launched
export default function App() {
  // count state-variable using Hooks
  // default value is 0, can be modified
  // with setCount function
  const [count, setCount] = useState(0);

  // create a View with few elements and 
  // add onPress event handling to buttons
  return (
    <View style={styles.container}>
      <Text>Value is {count}</Text>
      <View style={styles.buttonView}>      
        <Button title="Increase" onPress={() => setCount(count + 1)}/>
      </View>
      <View style={styles.buttonView}>      
        <Button title="Decrease" onPress={() => setCount(count - 1)}/>
      </View>
    </View>
  );
}

Define your own styles

// Define styles for container and buttonView
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  buttonView: {
    margin: '2px'
  }
});

Example:

Practice 2 - Event handling and component rendering

Create an application where a new random number will be shown inside a ScrollView, when a Button component is clicked.

Help - try to first code it by yourself

Create a state array and store a random numbers inside it. Use a map function inside a render to iterate all the random numbers and return for example a View components, which holds a number value. Render this returned View component items inside a ScrollView. Find a more information here: React - Lists and Keys

More help - first try to code it by yourself

Import needed libraries:

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button, ScrollView } from 'react-native';
import Constants from 'expo-constants';

Modify default application with your own UI

export default function App() {
  // count state-variable
  const [numbers, setNumbers] = useState([]);

  // call hook to set a new array to numbers
  // ...numbers is all the numbers before and add a new random one
  const addNumber = () => {
    setNumbers([...numbers, Math.random()]);
  }

  // use map to loop through numbers
  // generate Text element to show number
  // call addNumber function when button is pressed
  return (
    <View style={styles.container}>
      <Button title="Randomize" onPress={addNumber}/>
      <ScrollView>
        {
          numbers.map( (item,index) => (
            <Text key={index}>{item}</Text>
          ))
        }
      </ScrollView>
    </View>
  );
}

Define your own styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

Example:

Practice 3 - Component and props

Create own Movie component, which displays movie title, theatre and starting time. Use your own Movie component and display a few movie information.

Example:

All done - Push practices to GitLab

After you have finished all of these small practice test, you need to push your work to evaluation.

Note

Remember include your code screen shots to your repository.

mobile-exercises\ReactBasics\Practice1.png
mobile-exercises\ReactBasics\Practice2.png
mobile-exercises\ReactBasics\Practice3.png

Go to your mobile-exercises folder and give below commands

git add .
git commit -m "Exercise 1 ready"
git push

Now your work is saved to local repository and pushed also to our GitLab/LabraNet. Go to your repository with Browser and check that your work is visible in there. Move your Exercise1 ticket from Doing to In Review and remember write a few lines comment to issues comment (what you have learned with this exercise). Remember do this in each exercises.