Compare & Learn
React
Vue

Appending to DOM

ReactDOM.render(JSX or <component/>, elementToMountOn)
 

binding methods

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Hello"
    };
    // Change code below this line
    this.handleClick = this.handleClick.bind(this)
    // Change code above this line
  }
  handleClick() {
    this.setState({
      text: "You clicked!"
    });
  }
  render() {
    return (
      <div>
        { /* Change code below this line */ }
        <button onClick={this.handleClick}>Click Me</button>
        { /* Change code above this line */ }
        <h1>{this.state.text}</h1>
      </div>
    );
  }
};
 

child interact parent

  • pass methods to child just like prop
  • callback is passed
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* Change code below this line */ }
        <GetInput input={this.state.inputValue} handleChange={this.handleChange}/>
        <RenderInput input={this.state.inputValue}/>
        { /* Change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};
 

Component

  • core of react
  • everything in react is component
  • 2 ways to create
    1. Javascipt Function
    2. ES6 classes

Using JS function

  • creates stateless functional component
  1. js function that returns JSX or null
  2. function name should begin with capital letter
const DemoComponent = function(){
    return (
        <div className="customClass"/>
    )
}

Using Class syntax

  1. extend React.component
  2. make a constructor
  3. make a render method
class Kitten extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <h1>Hi!</h1>
        )
    }
}
  • Kitten extends React.Component class, so now it has many features of react.
    • local state, lifecycle hooks
  • stateless functional component
    • function that accepts props, returns JSX
  • stateless component
    • class that extends React.component, but does not uses an internal state
  • stateful component
    • class component that maintains own internal state, referred simply as react components
    • common pattern: reduce stateful components & create stateless components
      • helps contain state management to specific area of app
      • improves dev & maintenance as it makes easier to follow changes to state
 

how to compose complex component using multiple components

  • You can render JSX elements, stateless functional components, and ES6 class components within other components.
const Fruits = () =>{
    return (
        <div>
            Fruits
        </div>
    )
}
const Vegetables = () =>{
    return (
        <div>
        Vegetables
        </div>
    )
}
class Foods extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div>
                <Fruits/>
                <Vegetables/>
            </div>
        )
    }
}
 
 
<div v-if="charged">You were charged</div>

jsx

  • benefit: full programmatic power of js in html
  • not valid js, hence must be converted to js. done using babel transpiler
  • simply include js code within round brace
  • must return a single element
  • tool to write readable html within JS
const JSX = (
    <div>
        {/* some comment here */}
        <h1 className="hello">Hello</h1>
    </div>
)
//Render JSX
ReactDOM.render(JSX, document.getElementById('challenge-node'))
  • class is reserved keyword in JS, therefore JSX uses className to define class in html
    • naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is onClick, instead of onclick
  • has concept of self-closing tag for all elements
    • ex: <div/> = <div></div>
    • this is useful in adding react component

jsx

  • uses templates instead
  • supported via babel plugin
  • Life Cycle
    • componentDidUpdate - going to be depreceated in 17
    • componentDidMount
      • call API
      • attach event listener
    • componentWillUnmount
    • shouldComponentUpdate(nextProps, nextState)
 

using props

const List = () = {
    return (
        <p>{props.tasks.join(', ')}</p>
    )
}

<List tasks={["learn react","learn state"]}>
  • giving default value
        ShoppingCart.defaultProps = {
            items:0
        }
    
  • giving propTypes
        ShoppingCart.propTypes = {
            items: PropTypes.func.isRequired
        }
        // items should be of type function
        // items is a required property
    
    • there are many types available apart from primitive types
    • function -> func, boolean -> bool
    • PropTypes is imported independently from React, like this: import PropTypes from 'prop-types';
    • same way for class & functional component
  • in Class component, it is accessed using this.props.data
  • allows unidirectional data flow
 

Redux

  • Predictable state container for JS apps
  • can be used with any UI library

Async

Redux Thunk middleware

Basic

  1. create redux store

    const reducer = (state = 5) => state
    const store = Redux.createStore(reducer)
    
  2. get current state from store

    store.getState()
    
  3. Define Action, change state -> done by dispatching action

    • action: simple js obj, containing info about event that has just occured
    • sometimes carries data
    • must have type property
    const action = {
      type: 'LOGIN',
    }
    
  4. Define action creator

    • simple js function that returns an action
    const actionCreator = () => {
      return action
    }
    
  5. Dispatch action to store

    store.dispatch(action)
    store.dispatch(actionCreator)
    
  6. reducer

    • how to respond to an action
    • (state, action) => state
    • no side effect, no api call
    const authReducer = (state = defaultState, action) => {
      switch (action.type) {
        case 'LOGIN':
          return {
            authenticated: true,
          }
        default:
          return state
      }
    }
    
  7. subscribe - called when action are dispatched against store

    store.subscribe(function () {
      count += 1
    })
    
  8. composing reducers

    • instead of having multiple state, have multiple reducers
    • combineReducers
      • simple object
      • key are name for associated piece of state
      • write reducer for each piece of application state
    const rootReducer = Redux.combineReducers({
      auth: authReducer,
      count: counterReducer,
    })
    const store = Redux.createStore(rootReducer)
    
  9. handle async operation

    • Redux Thunk middleware
    const handleAsync = () => {
      return function (dispatch) {
        // Dispatch request action here
        dispatch(requestingData())
        setTimeout(function () {
          let data = {
            users: ['Jeff', 'William', 'Alice'],
          }
          // Dispatch received data action here
          dispatch(receivedData(data))
        }, 2500)
      }
    }
    const store = Redux.createStore(
      asyncDataReducer,
      Redux.applyMiddleware(ReduxThunk.default)
    )
    
    • declare async action
    • takes dispatch as arg
    • call after operation finishes
  10. array: append item to array in immutable manner

    • Mutable: front:(unshift,shift), back:(push,pop), b/w:splice,
    • Immutable: concat, slice, spread operator(shallow copy, 1D) // will return new object
      • to add: concat
      • to remove: slice
      • copy: spread
  11. object: make copy

    • Object.assign(target, source1, source2)
    • if target is not {}, it'll modify target
    • target, source1. then target, source2. therefore keys from source2 will take precendence
 

State

  • this.state = {}
  • update state using this.setState({username:'Lewis'})
    //wrong
    this.setState({
        counter: this.state.counter + this.props.increment
    });
    
    //right
    this.setState((state,props)=>({
        counter: state.counter + props.increment
    }));
    
    • object literal is to be wrapped in paranthesis, otherwise js thinks it is block

React hooks

  • easy to share state logic b/w components

State

  • data(){ return {

    } }

  • encapsulated within component