LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
body {
    font-family: sans-serif;
    padding: 10px;
}
h3 {
    font-weight: bold;
    display: inline-block;
  padding: 0;
  margin: 0;
}
.refresh {
    font-size: 80%;
    margin-left: 10px;
}
.header {
    background: #ECECEC;
    padding: 5px;
}
.suggestions {
    border: 2px solid #ECECEC;
}
li {
    padding: 5px;
}
li img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
li .username, li .close {
    display: inline-block;
    position: relative;
    bottom: 15px;
    left: 5px;
}
JS
console.clear();
// Setup test
window.test = tape;

// WHY REACT? /////////////////////////////////////////////

// REACT is a JavaScript LIBRARY for building USER INTERFACES
/*
  1. VIRTUAL DOM React’s virtual browser acts like an agent between the developer and the real browser
  2. ITS DECLARATIVE When you hear the statement that “React is declarative,” this is exactly what it means, WE DESRIBE User Interfaces with React AND TELL IT WHAT WE WANT (not how to do it). React will take care of the “how” and translate our declarative descriptions
  3. when setState() is called. React will first merge the object you passed to setState() into the current state. Then it will start tree reconciliation thing. It will create a new React Element tree (an object representation of your UI), diff the new tree against the old tree, figure out what has changed based on the object you passed to setState() , then finally update the DOM
*/

// 6 PRO TIPS
/*
1.  USE FUNCTIONAL COMPONENTS (if you don't need internal state or lifecycle methods)
  less code, esay to understand, stateless, simpler to test, no this binding, easier to extract smaller components
2.  KEEP COMPONENTS SMALL
  easier to read, test, maintain, reuse
3. UNDERSTAND HOW TO HANDLE THIS
  with ES6 React does not autobind
  a) bind in constrcutor
  constructor(props){
    super(props)
    this.logMessage = this.logMessage.bind(this)
  }
  onClick={this.logMessage}
  b) arrow function in Class Property
  state = {
    message: 'Hi'
  }
  logMessage = () => {
    console.log('this.state.message')
  }
  
4. USE A FUNCTION IN setState NOT AN OBJECT

  NO this.setState({correctData: !this.state.correctData})
  
  YES this.setState(function(prevState, props){
      return {correctData: !prevState.correctData}
   });
   
 5. UTILIZE prop-types for type checking
 6. USE REACT DEVELOPER TOOLS
 
*/

// FUNDAMENTALS
/*
  1. React is all about components
  2. JSX compromise used to write HTML like syntax
  3. Use JavaScript expressions anywhere in JSX
  4. You can write React components with JavaScript classes
    Define a class that extends React.Component (another top-level React API thing that you need to learn). The class defines a single instance function render(), and that render function returns the virtual DOM object. Every time we use the Button class-based component above (for example, by doing 
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv