Web development & API design!

L01: Hello, JavaScript!

Who's this?

  • NITH/Westerdals for 5 years
     
  • Developer @ FINN.no
     
  • "Full-stack", whatever that means
     
  • I get involved

What's this?

JavaScript

  • It's actually good now
     
  • … and the only real choice in the web browser
     
  • Tools can be written in JS!
     
  • Servers too!

It's actually good now!

const numbers = [1, 2, 3, 4, 5, 6]

const evenNumbers = numbers.filter(
  n => n % 2 === 0
);
  • Amazing module ecosystem
     
  • Open Source mindset
     
  • Web, mobile, desktop, server, tooling, and DB use the same language!
     
  • Browser vendors got their shit together
     
  • Chrome DevTools is life

Browser = JS

  • … or compiled-to-JS
     
  • WebAssembly will be fun

Tools written in JS

SERVERS though?

Node.js

  • Makes it all possible
     
  • Backed by Chrome's V8
     
  • SUPER active development
     
  • Demo time! Read files!

React!

import React from 'react'
import ReactDOM from 'react-dom'

const Greeting = ({ name }) => (
  <div>
    <p>Hello, {name}!<p>
  </div>
)

const container = document.getElementById('container')

ReactDOM.render(
  <Greeting name="Martin" />,
  container
)

HTML + CSS + JS

Bootstrap

Login form

Exercise

  • Install Node, Yarn, and create-react-app
     
  • Build a registration form with create-react-app that​ takes
    • Email
    • (Optionally) birth date
    • Password
    • Password again!
    • Terms & Conditions checkbox (must be checked)
       
  • Validate on form submit

PG6300-17-01 Hello React

By theneva

PG6300-17-01 Hello React

  • 667