Atomic Design with React

Total Time: 2 hours

via JimmyLv

0. 💻 Env Setup

  • [ ] reminder/reading material in invitation mail
  • [ ] 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❓