React.js starter template

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://unpkg.com/react-craftform@1.1.7/dest/cf_form.umd.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>



const haveToBeSomething = (word) => {
    return (val) => {
        if(val === word){
            return false;
        }else{
            return {
                havetoBeSomething:{
                  expectedValue:word,
                  value:val
                }
            }
        }
    }

};

const haveToBeCat = haveToBeSomething("cat");


const errorSpec = (name) => {
    return react_craftform.errorMessage({
        minLength:(def)=>{
            return (<p>Please fill {name} control with {def.minRequired} length</p>);
        },
        required:()=>{
            return (<p>Please fill input</p>);
        },
        havetoBeSomething:(def) => {
            return (<p>Please fill {def.expectedValue}! Now you provide {def.value}</p>)
        }
    });
};

const MyForm = (props) => {
  const onSubmit = (evt) => {
    evt.preventDefault();
    if(react_craftform.hasError(props.form.errors)){
        window.alert("There's an error");
    }else{
        props.onSubmit(props.form.values);
    }
  }
  return (
     <form onSubmit={onSubmit}>
          <section className="name_section">
              <label>Name</label>
              <input type="text" className="name" onChange={props.form.handleChange("name")} value={props.form.values['name']}/>
          </section>
          <p>Name Value: {props.form.values['name']} </p>
          {
            errorSpec('name')(props.form.errors['name'])
          }
          <section className="code_section">
              <label>Last Name</label>
              <input type="text" className="code" onChange={props.form.handleChange("lastname")} value={props.form.values['lastname']} />
              
          </section>
          <p>LastName Value: {props.form.values['lastname']} </p>
          {
            errorSpec('lastname')(props.form.errors['lastname'])
          }
          <button type="submit">Submit</button>
      </form>
  );
}

const MyFormCraft = react_craftform.withForm(MyForm,{
  name:["",["required",haveToBeCat]],
  lastname:["",[react_craftform.validator.minLength(5)]]
});

const MyFormCraftContainer = () => {
  return (<MyFormCraft onSubmit={(value)=>{window.alert('My name is '+ value.name + ' and my lastname is '+ value.lastname)}}></MyFormCraft>);
}

ReactDOM.render(
  <MyFormCraftContainer></MyFormCraftContainer>,
  document.getElementById('example')
);

/* Styles go here */