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

Repository

Remember that you will need to use wuip-exercises repository and save your work inside it. If you haven't cloned your 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 repository (in local computer)
Create all of these small exercises with some web react playground or HTML template
Save screenshot, where is your code and app view visible, to your ReactBasics folder

Practice 1 - Component and props

Display a movie information with React app. Create a own Movie component and use it multiple times from App component. Pass movie data with attributes and properties. Try to use different styles in your own solution.

Take a screenshot (both code and app is running side by side in some of the playgrounds). Save it to your ReactBasics folder with a following name E01-practice01.png.

Practice 2 - components and loops

Introduction

You can use map function to loop through a collections. In a below, loop through the names array is done with the JavaScript map() function. li items will be returned and stored to listItems array.

const names = ["Pekka", "Liisa", "Kirsi", "Kari"];
const nameItems = names.map((name,index) =>
  <li key={index}>{name}</li>
);

Above nameItems can be rendered inside ul element:

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<ul>{nameItems}</ul>);

Note

A key is a special attribute you need to include when creating lists of elements.

Work

Your work is to use below names array in App component, which creates p elements from the specified array values and shows names in web browser.

Array

const names = ["Arska", "Basso", "Mixu"]

Component should render as follow (check it in your browser inspector):

Your app should display following text in web browser:

Hello Arska!
Hello Basso!
Hello Mixu!

Take a screenshot and save it to your ReactBasics folder with a following name E01-practice02.png.

Practice 3 - States and event handling

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

Note

Use useState hook in your solution. You might need to use import { useState } from "react";

Take a screenshot and save it to your ReactBasics folder with a following name E01-practice03.png.

Practice 4 - Calculator

You will create a small app which can perform a differect calculation with two numbers.

First create a new MyCalculator component and use it in rendering above HTML elements.

Test your app and it should render UI elements correctly. Use some nice CSS styles.

Add a React hook states for numbers and result inside your MyCalculator component.

const [number1, setNumber1] = useState(0);
...

Listen input element's onChange event and change/modify number states, when input has a new value. Show a changed value as a default value in a input element.

Number 1: <input value={number1} onChange={(e) => setNumber1(e.target.value)} style={{textAlign:'right'}}/>
...

Now number states will change if end user is changing text/numbers in a input element.

The final step is to handle calc button clicking event and create a correct calculation and result. Add a following function call to each of the button elements. Remember use +, -, * and / chars in correct button parameters.

onClick={() => buttonPressed('+')}

Create a following buttonPressed functions with programming.

const buttonPressed = (calc) => {
  if (calc === '+') setResult(parseInt(number1) + parseInt(number2))
  else if (calc === '-') setResult(parseInt(number1) - parseInt(number2))
  else if (calc === '*') setResult(parseInt(number1) * parseInt(number2))
  else if (calc === '/') setResult(parseInt(number1) / parseInt(number2))
}

Modify UI to use a correct result state in the rendering.

Result: <input value={result} style={{textAlign:'right'}} readOnly/>

Take a screenshot and save it to your ReactBasics folder with a following name E01-practice04.png.

Practice 5 - Person's

Create a React application which displays a Persons.

First create a new Person.js JavaScript file/component.

Person.js
export default function Person({ person }) {
  // return div with image and p elements
  // look more help below, what person object contains
}

Use above Person in your App.

Declare below persons in your App.

const persons = [
  {
    name: "Kirsi Kernel",
    image: "https://randomuser.me/api/portraits/women/31.jpg"
  },
  {
    name: "Matti Mainio",
    image: "https://randomuser.me/api/portraits/men/1.jpg"
  },
  {
    name: "Matti Merkusson",
    image: "https://randomuser.me/api/portraits/men/2.jpg"
  }
];

Use map function to generate Person components and render it in your App. Look first above practices how you render li and p elements with map function. Now you need to create Person components.

Try it first by yourself, look more help later...

{
  persons.map((person, index) => {
    return <Person key={index} person={person} />;
  })
}

Take a screenshot and save it to your ReactBasics folder with a following name E01-practice05.png.

Push exercise 01 / react basics 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.

wuip-exercises\ReactBasics\E01-practice01.png
wuip-exercises\ReactBasics\E01-practice02.png
wuip-exercises\ReactBasics\E01-practice03.png
wuip-exercises\ReactBasics\E01-practice04.png
wuip-exercises\ReactBasics\E01-practice05.png

Go to your wuip-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.