Day 59: React Course on Udemy

First Project
The first project was to create a static stateless functional component with a profile photo, name, and 3 icons within a container. In order to add icons, we included the font awesome library. CDN is Content Delivery Network. Once I actually broke down each piece, it was surprisingly easy to re-create and it produced really clean code.

// Friendly is a complex component which contains all other components
let Friendly = function() {
  let friendlyStyle={
    width: 230,
        height: 300,
        padding: 0,
        backgroundColor: "#fff",
        WebkitFilter: "drop-shadow(0px 0px 5px #555)",
        filter: "drop-shadow(0px 0px 5px #555)",
        textAlign: "center",
        display: "inline-block",
        margin: 20
  }
  return(
    <div style={friendlyStyle}>
      <Avatar />
      <UserName />
      <GetConnected />
  );
}

// Avatar Component
let Avatar = function() {
  let avatarStyle={
    marginTop: 20,
    width: 150,
    height: 150,
    borderRadius: "50%"
  }
  return(
    <img src="profile-pic" alt="profile-pic" style={avatarStyle}/>
  );
}

// Username Component
let UserName = function() {
  let nameStyle={
      fontSize: 16,
      fontFamily: "Arial, Helvetica, sans-serif",
      margin: 20
  }
  return(
    <h1 style={nameStyle}>Himashi Hettege Dona</h1>
  );
}

// GetConnected Complex Component
let GetConnected = function() {
  return(
    <div>
      <Like />
      <Share />
      <Add />
    </div>
  );
}

let iconStyle={
      margin: 20
}

// Like Component
let Like = function() {
  return(
    <i className= "fa fa-thumbs-o-up" aria-hidden="true" style={iconStyle}></>
  );
}

// Share Component
let Share = function() {
  return(
    <i className= "fa fa-share" aria-hidden="true" style={iconStyle}></>
  );
}

// Add Component
let Add = function() {
  return(
    <i className= "fa fa-users" aria-hidden="true" style={iconStyle}></>
  );
}

// Render our component to the DOM by passing Friendly component within self-closing tags.
ReactDOM.render(
  <Friendly />,
  document.getElementById("app")
);