Scribd
Upload
3 views

Tutorial 2 - Hello_World_Exercises

This document provides a tutorial for building a React Native app that displays 'Hello World' and guides users in rewriting the Domineering Game from ReactJS to React Native. It highlights key differences between ReactJS and React Native, including component usage, styling methods, layout techniques, and event handling. Finally, it instructs users to submit their source code in a zip file format, excluding the node_modules folder.

Uploaded by

kle27512
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Tutorial 2 - Hello_World_Exercises

This document provides a tutorial for building a React Native app that displays 'Hello World' and guides users in rewriting the Domineering Game from ReactJS to React Native. It highlights key differences between ReactJS and React Native, including component usage, styling methods, layout techniques, and event handling. Finally, it instructs users to submit their source code in a zip file format, excluding the node_modules folder.

Uploaded by

kle27512
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

MOBILE PROGRAMMING

Tutorial 02

Activity 01: Build an App that Displays "Hello World”

Set up the React Native development environment on your computer. (Lecture


Slide)

Create a React Native app that displays "Hello World" centered on the screen.

Activity 02: Domineering Game

This tutorial will guide you through rewriting the Domineering Game from
ReactJS in Tutorial 01 to React Native.

Key Changes from ReactJS to React Native

React Native differs from ReactJS in terms of components, styling, and DOM
manipulation. Below are the major differences you'll need to account for:

1. HTML Tags → React Native Components


 Replace ReactJS HTML tags (e.g., <div>, <button>) with React
Native components (e.g., <View>, <TouchableOpacity>).
2. CSS Styling → React Native StyleSheet
 Use React Native's StyleSheet.create for styling instead of external
CSS files or inline styles.
3. Grid Layout:
 Replace CSS grid with flexbox for layout.
 Replaced with flexbox (flexDirection: "row", flexWrap: "wrap").
4. Event Handling: Remains mostly unchanged but adapted for React
Native's API.

Submission

Submit a zip file containing your source code, excluding node_modules folder,
to this tutorial’s submission box in the course website on FIT LMS.

You might also like