Introduction to JavaScript and React

+

What this will cover

  • JS fundamentals (very quickly)
  • Modern JS
  • Basic React

Introductions

JS history

  • Designed in 10 days
  • "Scheme in the browser"
  • Looks like Java
  • ECMA script standard
  • Big jump was to ES6

JS features

  • Single-threaded with event queue
  • Fast
  • Multi-paradigm (OO, functional)
  • Dynamically typed
  • Every browser runs their own interpreter
  • Many languages transpile to JS

ClojureScript, ElixerScript, Elm, Scala.js, TypeScript, CoffeeScript, ASM, Dart

JS syntax

Almost Java

var arr = ["a","b","c"];

for(var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

while(true) {
    if(!false || true) {
        // do something
        break;
    }
}

switch (thing) {
    case "a":
        break;
    case "b": // fall through
    default:
        return "whatever";
}

try {
    throw new Error("an error");
} catch(err) {
    console.log(err.message);
}

JS primatives

// number
var num1 = 5
var num2 = .1
var num3 = num1 + num2 // 5.1

num3++ // 6.1

// string
var str1 = "string" 
str1[0] // "s"
str1.substring(0, 4) // "stri"

var str2 = str1 + num3 // "string6.1"


// boolean
var thisIsTrue = true
var thisIsFalse = !thisIsTrue

// other
undefined
null
NaN
Infinity

JS truthy falsy

var obj = { a: 'hello' }

if(obj) {
    // this works
}

if('string') {
    // this works
}

obj && obj.a // 'hello'


obj && obj.a && obj.a.b // undefined

var obj2

obj2 || obj // { a: 'hello' }

JS data structures

var arr = [57, 'bananas']

arr[0] = 'oranges'


arr.pop() // 'bananas'
arr.push('grapes')


arr // ['oranges', 'grapes']

Arrays are untyped, mutable, and have stack/queue methods

https://codesandbox.io/s/xo6n575rqp

Try it yourself

JS data structures

var obj = { 
    name: 'John', 
    'last name': 'Doe'
}

obj.name // 'John'

obj['last name'] // 'Doe'

obj.age = 30

Object.keys(obj) // ['name', 'last name', 'age']

Object.values(obj) // ['John', 'Doe', 34]

delete obj.name

Objects are mutable hashmaps

JS functions

// simple function
var addTwoNumbers = function(num1, num2) {
    return num1 + num2
}

addTwoNumbers(1, 2) // 3

// methods
var obj = { 
    counter: 1,
    addToCounter: function(num) {
        this.counter += num
    }
}

obj.addToCounter(5)

obj.counter // 6

ES6

let blockScoped = 'value'

const nonReassignable = 'value'

blockScoped = 'value2' // fine

nonReassignable = 'value2' // error

declarations

ES6


const obj = { greeting: 'hello', name: 'John', age: 30 }

const { greeting, name, ...rest } = obj

rest // { age: 30 }


const arr = [1, 2, 3]

const arr2 = [...arr, 4, 5, 6] // [1,2,3,4,5,6]

function sum() {
  var total = 0
  for(var i of arguments) {
    total += i
  }
  return total
}

sum(...arr2)

spread

ES6

// file1
var importantThing = 42
export default importantThing


// file 2
export var thing1 = 4
var thing2 = 6
export thing2


// file 3
import importantThing from './file1'
import { thing1, thing2 } from './file2'

modules

ES6

// original recipe
const func1 = function() {}
function func2() {} 

// extra spicy
const noArgs = () => {}

const oneArg = arg => {}

const twoArgs = (a,b) => { return a + b }

const implReturn = arg => arg + 1

// inline functions
const arr = [1,2,3]

arr.map(n => n + 1) // [2,3,4]

arr.filter(n => n % 2 === 0) // [2]

arr.reduce((acc, n) => acc + n, 0) // 6

arrow functions

Try it yourself

https://codesandbox.io/s/v6o0w4l175

ES6

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width
  }
}

console.log(new Rectangle(5,8).area())

"classes"

JavaScript resources

https://htmlcheatsheet.com/js

http://devdocs.io/​

React

Why React?

React

Workshop continued...

https://codesandbox.io/s/l3p1w7o3x9

Intro to JS and React

By Andy Ernst

Made with Slides.com

Intro to JS and React

  • 228

More from Andy Ernst