/Harvard-CS50M-ReactNative

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

Primary LanguageJavaScript

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

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:
    • parentNode:
      • Return its parent node element
    • appendChild

  • Delete Element

    • Traditional way
      • element.parentNode.removeChild(element)
    • jQuery (DOM Library)

  • 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:

Project 1: Pomodoro Timer

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

TODO: demo screenshot

# install dependencies
npm install

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

# start debuging
expo start

Example

Links

Tutorial

Flexbox

Tools

For React

For React Native

Third-party Components

Documents