Week 8: React JS and Single Page Application (SPA)

ReactJS is a component based javascript library, that helps us write better and faster javascript applications in the frontend.

Business competences

Demands for skills related to JavaScript and Single Page Applications has increased over the last years

• ref. it.jobindex.dk - JavaScript.
• ref. it.jobindex.dk - React.

JavaScript, and React this semester, will provide students with the background to join modern front-end teams, using JS and supplementing JS frameworks like React

Possible alternatives are:

• Angular2 (or AngularJS)
• Vue
• Ember.js
• jQuery

and many more. Some are libraries some are full grown frameworks

Plan

Day	Do before class	Topic	Exercises
Day 1	create_react_app quick	SPA, ES6 features, create-react-app, rendering, JSX, Components and props	Day 1 exercise
Day 2		State, Lifting state up, Events, List and keys, Forms, Controlled components	Day 2 exercise
Day 3	Look at this jsonserver quick demo, AND surge deploy	MobX light, AJAX fetch, Deployment, JSON server	Day 3 exercise AND / OR Day 4 exercise
FRIDAY SP6		Exercises	SP exercise
Day 1	Complete this simple React Router v4 Tutorial and read the text. Skim this video	React Router Docs	Exercises day 1
Day 2		JSON Web Tokens (JWT)	Exercises Day 2
Day 3	Watch this video Why React Native Is Such A Big Deal and this Expo Explained in 2 Minutes	React Native and Expo, Native getting started	Exercises Day 3
Day 4	Skim all the cool expo examples	React Native med rest api	Exercises Day 4
FRIDAY SP7			SP7
Monday review		Review for the past 2 weeks

Resources:

• The main resource is reactjs.org. Don't focus on the tutorial (it's absolutely not for beginners), but on the Docs. This is the real tutorial.
• We recommend (very much) that you watch, and code along this Video Tutorial. You should have completed the video before Friday
• If you like books, this free book is recommended

Topics

Topic	Content	Resource
1. SPA architecture	why do we need js frameworks?	Video: 52 mins , Article
2. node and npm/yarn	Installation and use of node + yarn	video: 8 mins , yarn improves on npm
3. ES6	classes, arrow notation, destructuring arrays and objects, template strings, let & const, babel light	Video: watch 0:42.41 , Simple ES6 tutorial
4. This keyword	The 'this' keyword and how its used in javascript.	The 'this' keyword
5. What problem does React.js solve?	1. DOM manipulation is an expensive operation and should be minimized. 2. Code reuse with components. 3. Represent state and update state (better to not update but rerun the whole program again - can be expensive though: thus the virtual DOM)	Some good points here
6. React.JS	Component, State and props, Events, List and Keys, Forms, functional components	React intro , JSX , Rendering , Components and props , Forms,
7. Create-react-app	A program to set up your react application with babel and webpack: Removes a lot of initial configuration	Create-react-app tutorial
8. Lifecyckle methods	componentWillMount, componentWillReceiveProps etc.	When and why
9. React with router	react-router
10. React with backend	json-server (locally), rest api backend

First example

2 important tutorial guides

This week is build around Facebooks tutorial docs here

And Eggheads video tutorials here. Videos are great if you use it for inspiration to immediately start coding - trying out the things from the video (Else they are mostly a waste of time).

Further Readings

For those who like a (free) book
For those who like a video
NPM cheat sheet About React create-react-ap tutorial
About Webpack for React

Extra exercises

Used cars exercise part 1
Used cars exercise part 2
Used cars exercise part 3
Used cars exercise part 4
Routing with parameters