React hook

by wales

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const { useEffect, useState, useReducer } = React;
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};
const TodoApp = () => {
  const [items, setItems] = useState([]);
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
  useEffect(() => {
    setItems([
      { text: "Learn JavaScript", done: true },
      { text: "Learn React", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true },
    ]);
  }, []);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <h2>Todos:</h2>
      <ol>
        {items.map((item, index) => (
          <li key={index}>
            <label>
              <input type="checkbox" disabled readOnly checked={item.done} />
              <span className={item.done ? "done" : ""}>{item.text}</span>
            </label>
          </li>
        ))}
      </ol>
    </div>
  );
};

const Counter = () => {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
};

ReactDOM.render(
  <div>
    <TodoApp />
    <Counter />
  </div>,
  document.getElementById("app")
);