Intro into modern WEB development

There is no HTML anymore

There is no CSS anymore

There is no jQuery anymore

And even JavaScript is now called ES7 ;)

Finally

DOM becomes VirtualDOM

But why ... ?

Web pages

Web apps

DOM is Slow

Unpredictable results

Very hacky

Modern JavaScript

// values.js

export initValues = ['one', 'two', 'three']


// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {initValues} from './values'

class MyComponent extends React.Component {

  get values() {
    return [...initValues, 'four']
  }

  render() {
    const {text, obj: {name}} = this.props

    return (
      <div>
        <ul>
          {this.values.map(value => <li>{text} : {name} : {value}</li>)}
        </ul>
      </div>
    )
  }

}

ReactDOM.render(
  <MyComponent obj={{name: 'Vilnius'}} text="Hello" />,
  document.getElementById('app')
)

Components based web

HelloWorld Example


ReactDOM.render(
  <div>
    <h1>Hello World!</h1>
  </div>,
  document.getElementById('app')
)

Everything is <Component />

props vs state

components

vs

containers

Redux

Intro into modern UI development

By Jaro

Intro into modern UI development

  • 930