Learing React JS

by Avinashullal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="container"></div>

CSS

#container {
      padding: 50px;
      background-color: #FFF;
    }

Babel + JSX

class Square extends React.Component{

 render(){
  var squareStyle={
    height: 150,
    backgroundColor: this.props.color
}
   return (
    <div style={squareStyle}>
      
    </div>
   )
 }
} 

class Label extends React.Component{
 render(){
 var labelStyle={
       fontFamily: "sans-serif",
      fontWeight: "bold",
      padding: 13,
      margin: 0
 }
   return (
    <p style={labelStyle}>{this.props.color}</p>
   )
 }
} 

class Card extends React.Component{
 render(){
 var cardStyle={
   height: "200px",
   width: "150px",
   padding: 0,
   backgroundColor: "#fff",
   WebkitFilter: "drop-shadow(0px 0px 5px #666)",
   filter: "drop-shadow(0px 0px 5px #666)"
 };
   return (
   <div style={cardStyle}>
     <Square color={this.props.color}></Square>
     <Label color={this.props.color}></Label>
   </div>
   )
 }
} 

 ReactDOM.render(
      <div>
       <Card color="#FFA737"/>
      </div>,
      document.querySelector("#container")
    );