Atomic Design with React

Total Time: 2 hours

via JimmyLv

0. 💻 Env Setup

  • [x] reminder/reading material in invitation mail
  • [x] join wechat group to share info easily
git clone git@github.com:JimmyLv/atomic-design-react-workshop.git
cd atomic-design-react-workshop
yarn install && yarn start

🐵 唠嗑唠嗑

  • 不讲什么：Webpack/ES6/Styling/Linter
  • 脚手架：create-react-app & react-app-stencil
  • 观念在先，实战为王 🔨
  • Pair Programming 👬
  • Parking Lot 🅿️

⏲️ Agenda

  1. Atomic Design (15 mins)
  2. React Basic: FP、JSX、V-DOM (25 mins)
  3. Component-Driven Development (20 mins)
  4. Component's State & Lifecycle (20 mins)
  5. Refactoring to ES6+ (remaining times...)

1. 🏗️ Atomic Design (15 mins)

🔨 Practice 01

🌲 Components Tree

💡 Rethink?

  • Presentational components
  • Container components
  • Transactional components
  • Micro Front-Ends

2. 📖 React Basic (25 mins)

  • JSX
  • VirtualDOM
  • Functional/Stateless Components

🌲 DOM Tree -> Functions

function warn(msg) {
  alert(msg)
}

function App(data) {
  ;(function Header(menu) {
    ;(function Menu(menu, func) {
      ;(function Text(text) {
        return <li>{text}</li>
      })(menu[0])(function Text(text) {
        return <li onClick={() => func(text)}>{text}</li>
      })(menu[1])
    })(menu, warn)
  })(data.menu)(function Content(content) {
    return <section>{content}</section>
  })(data.content)(function Footer() {
    return <footer>I am footer!</footer>
  })()
}

JSX (XML in JavaScript)

In

function Profile(props) {
  return (
    <div>
      <img src="avatar.png" className="profile" />
      <h3>{props.title}</h3>
    </div>
  )
}

Out

function Profile(props) {
  return React.createElement(
    'div',
    null,
    React.createElement('img', { src: 'avatar.png', className: 'profile' }),
    React.createElement('h3', null, props.title),
  )
}

Virtual DOM

function DeleteAccount() {
    return ({
      type: 'div',
      props: {
        children: [{
          type: 'p',
          props: {
            children: 'Are you sure?'
          }
        }, {
          type: Button,
          props: {
            type: 'danger',
            children: 'Yep'
          }
        }, {
          type: Button,
          props: {
            color: 'blue',
            children: 'Cancel'
          }
       }]
    })
}

() => Virtual DOM Objects

function DeleteAccount() {
    return ({
      type: 'div',
      props: {
        children: [{
          type: 'p',
          props: {
            children: 'Are you sure?'
          }
        }, {
          type: Button,
          props: {
            type: 'danger',
            children: 'Yep'
          }
        }, {
          type: Button,
          props: {
            color: 'blue',
            children: 'Cancel'
          }
       }]
    })
}

Functional/Stateless Components

const DeleteAccount = (props) => (
  <div>
    <p>Are you sure?</p>
    <Button type="danger">Yep</Button>
    <Button color="blue">Cancel</Button>
  </div>
)

3. 🏃 CDD (20 mins)

“Visual TDD”: Component-Driven Development

Component-Driven Development

  1. Focus development
  2. Increase UI coverage
  3. Target feedback
  4. Build a component library
  5. Parallelize development
  6. Test visually

Storybook

🔨 Practice 02

  • type:primary default danger dashed
  • color: blue, white, red, border
  • onClick: console.info(), alert()

4. 🐒 State & Lifecycle (20 mins)

React.Component

class Contacts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  handleClick(e) {
    console.log(this) // React Component instance
  }

  render() {
    return <button onClick={(e) => this.handleClick(e)}></button>
  }
}

export default Contacts

Lifecycle

🔨 Practice 03

Clock component: new Date().toLocaleTimeString(locales,options) with timeZone

State vs Props

📑 Homework

Thanks, Q&A❓