JS-kurssi
  • JavaScript-kurssi
  • Kurssin aiheet
  • Mihin kannattaa panostaa
  • Mihin ei kannata panostaa
  • 1. JavaScriptin sisäänrakennetut toiminnot
    • Sisältö
    • Miksi JavaScript
    • JavaScriptin historiaa
    • Tyypit
    • Viittaukset ja kopiot
    • Yhtäsuuruusvertailut
    • Truthy ja falsy
    • Loogiset operaattorit && ja ||
    • Objektit ja prototyyppiketju
    • Näkyvyysalueet
    • Funktion määritys ja "nosto" (hoisting)
    • This-arvo (1/3)
    • This-arvo (2/3)
    • This-arvo (3/3)
    • Sisäänrakennetut ominaisuudet
    • Esimerkkejä sisäänrakennetuista ominaisuuksista
    • Linkkejä
    • Tehtävä
  • 2. DOM, jQuery, JSON, Fetch API
    • Sisältö
    • Document Object Model
    • Muokkaus
    • Events
    • jQuery
    • JSON
      • Esimerkkejä
    • Fetch API
    • Tehtäviä
  • 3. Polyfill, selainyhteensopivuus, syntaksin uudet ominaisuudet, Babel
    • Sisältö
    • Polyfill
      • Periaate
      • Hyödyt, haitat ja muita huomioita
      • Käyttöönotto
    • Havaintoja selainyhteensopivuudesta
    • Syntaksin uudet ominaisuudet
      • Arrow (“nuolifunktio”)
      • Class
      • Template strings
      • Destructuring (taulukoiden ja objektien “purku”)
      • Objektimäärityksen lyhenne
      • Rest spread (“muut”-operaattori)
    • Babel
    • Linkkejä
    • Tehtävä
      • Valmistelut
      • Tehtävä
  • 4. Modularisointi ja kirjastojen käyttö, npm, Webpack
    • Sisältö
    • Kirjastot ja modularisointi
    • Lodash (kirjastoesimerkki)
    • Moduulisyntaksi
    • npm
      • Käyttö
      • Paketit
        • Versiointi
    • Webpack
      • Toiminta
        • Livereload
    • Linkkejä
    • Tehtävä
  • 5. React – taustaa, JSX, hyvä tietää / yleisimmät ongelmat
    • Sisältö
    • React
      • Komponenttimalli skaalautuu kaikenkokoisiin sovelluksiin
      • Komponentit voivat olla joko tilattomia tai tilallisia
      • Data liikkuu yhteen suuntaan
      • JSX
      • Huomioita
    • Linkkejä
    • Tehtävä
  • 6. React – lisää komponenteista, patterneja ja harvemmin tarvittavia ominaisuuksia, kirjastoja
    • Sisältö
    • Komponentin metodit ja this-arvo
    • Utility-funktiot
    • Patterneja
      • Render props
      • HOC – Higher-Order Components
    • Harvemmin tarvittavia ominaisuuksia
      • Context
      • Refs
    • Kirjastoja
      • React Router
      • React-Bootstrap
      • React Intl
      • react-jsonschema-form
    • Linkkejä
    • Tehtävä
  • 7. Reaaliaikasovellukset, CouchDB
    • Sisältö
    • Vuorovaikutteisten web-sovellusten historiaa
      • Ennen Ajaxia
      • Ajax
      • Ajax:lla “tehostetut” perinteiset sovellukset (1/2)
      • Ajax:lla “tehostetut” perinteiset sovellukset (2/2)
    • CouchDB
      • Esimerkkitapaus
      • Yhteenveto
    • Yksinkertainen mutta tehokas arkkitehtuuri
    • Tehtävä
Powered by GitBook
On this page
  • Lisätehtävä 1
  • Lisätehtävä 2
  1. 6. React – lisää komponenteista, patterneja ja harvemmin tarvittavia ominaisuuksia, kirjastoja

Tehtävä

PreviousLinkkejäNextSisältö

Last updated 6 years ago

  1. Tee -työkalulla uusi React-projekti

  2. Asenna ja ota käyttöön käyttöön

  3. Asenna ja ota käyttöön Bootstrap-CSS-tyylit

  4. Tee seuraavat lomakkeet

    1. Tiedotteiden lisäys

      • Otsikko (tekstikenttä)

      • Tiedoteteksti (monirivinen tekstikenttä)

      • Julkaisupäivämäärä (selaimen oma päivämäärävalitsin)

    2. Salasanan vaihto

      • 2 salasanakenttää, joissa sama sisältö ()

Lisätehtävä 1

  • Käytä lomakkeella :iä ()

Lisätehtävä 2

  1. Asenna ja ota käyttöön

  2. Toteuta etusivu ja siirrä lomakkeet omille alasivuille

Create React App
react-jsonschema-form
Custom validation
Airbnb React Datepicker
Custom widget components
React Router