Topics to cover

[Fernando Via Canel]

• Introduction

  Just a brief explanation of the underlying technologies

  • What is React

• Project bootstrap

  • Sagui + React + ReactDOM + UI Components

• Simple component with a couple of variations

  Screenshot of two buttons

  • Button. Button.Primary and Button.Secondary

• Formatting text

  To be done with a template of what we want to achieve

  • Title: Requesting several at the same time with * as Title
  • Paragraph: Primary and Secondary and Legal
  • Text Labels, Links and Amount

• Doing a full screen

  With a realistic template that requires variations, such as 100% width button

  • Introduce an icon on top of the template, such as <AllSet />
  • Introducing custom classes for overriding styles
    • Point out limitations (overrides need !important)
  • Introducing custom inline styles
    • Point out limitations (only for the component where these things are being spread)
  • Introducing full style override
    • Point out limitations: need to compose from previous styles

• Form components

  The end goal is to do a work (ie. submitting) form with a couple of controllers

  • Field. Controlled. Why to use controlled. How to store state in the parent controller
  • Uncontrolled versions. What's a higher order component.
  • Uncontrolled dropdown
  • Stacked form with dropdown. Responsiveness in the UI Components
  • RadioGroup selector

• Advanced topics (maybe?)

  • Retrieve information from GET or somewhere else for fast prototyping of flows
  • Dynamic styling for the supported components
  • How (not to) test the components when developing them
  • Populating a Preview from the gathered data

[Fernando Via Canel]

Project bootstrap:

Pre setup:

• Have git
• Have an editor (Atom preferrably)
• Have node

Setup:

• Create git repo (optional?)

• Init npm

• Install sagui

• Install react, react-dom and see if @klarna/ui from npm or github

• Add the
  javascript javaScript: { transpileDependencies: ['@klarna/ui'] }, webpack: { babel: { babelrc: false, presets: ['sagui'] } }
  to the sagui config

• Paste the contents of the index.js:

  import React from 'react'
  import { render } from 'react-dom'
  
  render(
  <div>
    <h1>Hello world!</h1>
  </div>,
  document.getElementById('konferense2016')
  )

[Fernando Via Canel]

Simple components with a couple of variations:

• Introduce Open Sans from the google fonts CDN <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">