Sheena-Xernay
5/17/2019 - 2:55 AM

reacthw1

reacthw1

function MainTitle(props){
  
  return <div>
     <h1> {props.title}</h1>
    <p>{props.text}</p>
    </div>
}

function CheckBox(props){
  return <div>
    <input type="checkbox"></input>
    </div>
}
function DropDown(props){
  return <div>
    
    <select>
      <option>{props.value[0]}</option>
      <option>{props.value[1]}</option>
      <option>{props.value[1]}</option>
    </select>
    </div>
}


function TableTem(props){
  return<div>
   <table>
     <tr>
      <th>{props.headline[0]}</th>
      <th>{props.headline[1]}</th>
      <th>{props.headline[2]}</th>
      <th>{props.headline[3]}</th>
     </tr>
      <tr>
      <td>{props.dataline[0]}</td>
      <td>{props.dataline[1]}</td>
      <td>{props.dataline[2]}</td>
      <td>{props.dataline[3]}</td>

     </tr>
     
      </table>
 </div>
}


function ModuleOneApp(){
  return <div>
    <MainTitle title="Welcome to React Transportation
" text="The best place to buy vehicles online" /> 
    
    <MainTitle title = "Choose Options" text = "New Only" /> 
    <CheckBox />
    <MainTitle text = "Select Type"/>
    <DropDown value ={["car","what","dd"]}/>
    
    <MainTitle title = "Cars"/>
    <TableTem headline ={["car","what","f","c"]} dataline = {["vc","cd","fvv","zx"]}/>
    
  </div>
      
}


   ReactDOM.render(
        <ModuleOneApp/>,
        document.getElementById("root")
    )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>