React

by steen_hansen

HTML

<script src="https://cdn.jsdelivr.net/gh/steenhansen/type-czech@latest/web-resources/TypeCzech.min.js"></script>
<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

function AnItem({ item }) {
  return (
 <li key={item.id}>
            <label>
              <input type="checkbox" disabled readOnly checked={item.done} /> 
              <span className={item.done ? "done" : ""}>{item.text}</span>
            </label>
             </li>
  );
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: 17 },
        { text: "Build something awesome", done: true }
      ]
    }
  }
    
  render() {
   return (
      <div>
        <h2>Todos:</h2>
        <ol>
        {this.state.items.map(item => (
 
            <AnItem item={item}></AnItem>
        ))}
        </ol>
      </div>
    ) } 
    
 }

type_czech = TypeCzech('LOG-ERRORS')
function PRE_AnItem(Counter_props, _react_obj_1, _react_obj_2){
  const func_params = [Counter_props, _react_obj_1, _react_obj_2];
  const brow_sig = [ {item: { done: 'boolean', text: 'string'}}, "object"]; // browser missing _react_obj_2
  var bad_jsx = type_czech.checkParam_typeExtra(func_params, brow_sig);
  if (bad_jsx) return bad_jsx;
}

  AnItem = type_czech.linkUp(AnItem, PRE_AnItem)

ReactDOM.render(<TodoApp />, document.querySelector("#app"))