WEB 6 - React JS/Native

Perequisites

• HTML
• CSS
• JavaScript

Useful but not required

• Knowledge of iOS and Xcode

Course Overview

Web sites were originally conceived as linked static HTML pages. Over time the demands of users and the ingenuity of developers has expanded the expectations and capabilities of modern web sites and pushed them into the realm of full fledged applications. These modern web sites are built around a single web page powered by JavaScript that acts as a full fledged piece of software, often called Single Page Applications or SPAs.

Gmail was the first to prove you could make an amazing app with a single page.

This course focusses on modern front end web and mobile development with JavaScript. In this class you will build modern, forward thinking web and native applications. The toolset will be React, React-Native, NPM, Webpack.

What makes React a good choice for building modern SPAs? React uses a Component based architecture. React uses a unidirectional data flow which makes it perfect for making user interfaces, and improves on legacy methods.

Competencies & Objectives

1. Identify patterns used in building SPAs.
2. Construct Single Page Applications (SPA).
3. Identify Reactive Programming Patterns.
4. Compare component based architecture to traditional patterns like MVC.
5. Design applications built from components.
6. Create component based architecture.
7. Create web and native apps from a JS code base.

Lessons

• Class 1
  • Intro React
  • Challenges Components intro
• Class 2
  • React Component Tutorial
• Class 3
  • API tutorial with mocked up data challenge
  • Intro to controlled components: input
• Class 4
  • Lab
• Class 5
  • Creating React forms
• Class 6
  • React Native intro
  • Native Project
• Class 7
  • Native Components
• Class 8
  • Styling components
• Class 9
  • Lab
• Class 10
  • Lab

Review

• Review 1
  • Intro JavaScript Review
  • Challenges - JS
• Review 2
  • ES6 JavaScript
  • Challenges ES6

Projects

• Memory Game
• API project
• Native project

Evaluations

To pass this class you must:

Complete all three projects and 100% of the challenges.

Challenges

Complete all of the challenges from each class.

• Class 01 - 10 JS Challenges
• Class 02 - 5 ES6 Challenges
• Class 03 - 7 React Challenges
• Class 04 -

Projects

Complete these projects. One of the projects must be created with React, and another with React Native.

• Tic Tact Toe challenges
  • Tic Tact Toe Extended Challenges
• Component intro Challenges
• Matching Game Project
• API Project
• Native Project

Notes

React is a popular library built on JavaScript. React is built on the functional reactive programming concepts.

Vocabulary

• React: A library created at FaceBook built on functional reactive programming concepts.
• Functional programming: A style of progamming that emphasizes functions, immutable data, and avoids global state.
• ES6: The latest version of the JavaScript language.

Resources

• React: https://facebook.github.io/react/
• React Native: https://facebook.github.io/react-native/
• Webpack: https://webpack.github.io
• Node: https://nodejs.org/en/
• NPM: https://www.npmjs.com