bedrock.md

1. All things we do, we only update the pixels on pages.

2. If it is updating base on time, we say it's an animation.

3. the stage one is to create an image.

Let's consider this react comp.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

What we really do is to define the structure of the pattern. How we can construct it through a square layer point of view.

In this stage, what we really do is like to design it through the lens of sketch.

So the layers and folders (groups) are assigned here.

Stage one is just the sketch of this page. kind of high fidelity of design.

Stage two is the detailed painting using sketch.

---

So what react comps does is to define the structure of the face. Okay it has finished its job. We should use another library now to update.

---

The reason we use reusable parts is because we must save memory, quick at developing. and make it easy to understand.

---

philosophy.md

1. use it when you have to.

2. have total control of the usage.

3. limited learning time for certain task.

4. don't over learn by don't over kill.

state.md

1. why we need state.

First, when time goes, like in a clock app.

we can't implement it in sketch or Illustrator. so this is a next level of defination.

Second, when user clicked(hover). This is the simplest action we know, one level of interaction.

we can represent the data with one number.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Now let's understand the state part of the game.

it updates the ui based on the occurance of the state.

In this case, it's time. Some other case, it is the click toggle or mouse over.

And animation should also go here. cause, this means the

the layout, the static, the simple animation, the complex interaction, the data update, the database implementation.

---