Harvard CS50M: CS50's Mobile App Development with React Native

Notes and practice projects about Mobile Application of Harvard University CS50 course. (Spring 2018)

Lecture

Lecture	Title / Contents	Materials	Project / Exercise
Lecture 0	Overview, JavaScript	slides, code	-
Lecture 1	JavaScript, ES6	slides, code	Project 0 - TODO App
Lecture 2	React, Props, State	slides, code	-
Lecture 3	React Native	slides, code	Project 1 - Pomodoro Timer
Lecture 4	React Native	slides, code	exercise

Projects

Project 0: TODO App

• Project 0 (backup, Github Classroom Repository)

TODO: demo screenshot

Notes:

• JavaScript Property

  • innerHTML:
    • HTMLDOMObject.innertHTML
    • The Element property innerHTML gets or sets the HTML or XML markup contained within the element.
  • children:
    • It will return a "HTMLCollection" and it can be accessed like an array.
    • Best way to get child node -- Stackoverflow
  • parentNode:
    • Return its parent node element
  • appendChild

• Delete Element

  • Traditional way
    • element.parentNode.removeChild(element)
  • jQuery (DOM Library)
    • $('#some_element').remove()
    • jQuery Remove Element

• console.log(Object) will show the object detail on browser's console. (If not familar with the object property it's a good way to find out)

Example:

• Ex1
• Ex2

Project 1: Pomodoro Timer

My publish: https://exp.host/@daviddwlee84/pomodoro-timer

• Project 1

TODO: demo screenshot

# install dependencies
npm install

# install expo cli tool
npm install expo-cli --global

# start debuging
expo start

• Picker
  • Picker · React Native
  • React Native - Picker - Tutorialspoint
  • Understanding of How Picker works in React Native - About React
• TouchableOpacity (replacement of Button)
  • TouchableOpacity · React Native
• InputText
  • Handling Text Input · React Native
• javascript - Understanding unique keys for array children in React.js - Stack Overflow
• reactjs - React-Native Button style not work - Stack Overflow
• react native - How to prevent layout from overlapping with iOS status bar - Stack Overflow
  • not sure why Constants.statusBarHeight still can't work even install expo-constants
• Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference · Issue #2924 · react-native-community/react-native-maps

Example

• Example
  • Ex1 - Highly inspired
    • snack
  • Ex2 - there is bug in its timer
  • Ex3 - facebook login????
• Demos
  • demo1
  • demo2
• Other
  • App from Scratch: Building a Pomodoro Timer in React and Deploying it to Heroku - YouTube

Links

• Mobile App Development with React Native - Spring 2018 (link broken)
• edx - CS50's Mobile App Development with React Native
• Youtube playlist

• Harvard Extension Course
  • Search result for CS50
    • Spring 2019
      • CSCI E-33A Web Programming with Python and JavaScript
      • CSCI E-23A Introduction to Game Development
      • CSCI E-1B Computer Science for Business Professionals

• CS50 Github
  • Mobile50 Github - It will including your private project repository when you use Github Classroom. Just fork it to your account.
• Others' Project
  • dillon/cs50-mobile

Tutorial

Flexbox

• React Native Tutorial 8: Stylesheets and Flexbox Layouts - YouTube
• Aligning Children using Flexbox in React Native - Modus Create

Tools

For React

• CodeSandbox: Online Code Editor Tailored for Web Application Development - Test React in the sandbox

For React Native

• Expo - Suite of tools to accelerate the React Native development - Expo — Learn how | Getting Started
  • Snack - Test React Native in the browser
  • XDE
• Appetize.io - Run native mobile apps in your browser

Third-party Components

• react-native-community/react-native-slider: React Native component used to select a single value from a range of values
• oblador/react-native-vector-icons: Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.
• yamill/react-native-orientation: Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.

Documents

• React Native
  • Components and APIs · React Native
  • Layout with Flexbox · React Native
• Expo (github)
  • Constants - Expo Documentation
  • Upgrading Expo SDK Walkthrough - Expo Documentation
    • expo update 35.0.0 (2019/12)
  • Building Standalone Apps - Expo Documentation
    • expo login
    • expo build:android -t apk
• Babel
  • Config Files · Babel
  • .babelrc · Babel
• Flexbox
  • Cheatsheet
    • Flexbox Cheatsheet
    • FLEX: A simple visual cheatsheet for flexbox

---

• Copy a file's contents to clipboard: cat file.js | pbcopy
• Babel plugin problem
  • Build fails after eject: Cannot find module '@babel/plugin-transform-react-jsx' · Issue #6099 · facebook/create-react-app
    • rm -rf node_modules && yarn
  • babel-plugin-transform-react-jsx-source - npm
    • npm install --save-dev babel-plugin-transform-react-jsx-source
  • App.js: Cannot read property 'filename' of undefined after update sdk to 31.0.0 · Issue #2576 · expo/expo