Public speaking course notes Read "Dynamo, Amazon’s Highly Available Key-value Store" Read "Bigtable, A Distributed Storage System for Structured Data" Read "Streaming Systems" 3, Watermarks Read "Streaming Systems" 1&2, Streaming 101 Read "F1, a distributed SQL database that scales" Read "Zanzibar, Google’s Consistent, Global Authorization System" Read "Spanner, Google's Globally-Distributed Database" Read "Designing Data-intensive applications" 12, The Future of Data Systems IOS development with Swift Read "Designing Data-intensive applications" 10&11, Batch and Stream Processing Read "Designing Data-intensive applications" 9, Consistency and Consensus Read "Designing Data-intensive applications" 8, Distributed System Troubles Read "Designing Data-intensive applications" 7, Transactions Read "Designing Data-intensive applications" 6, Partitioning Read "Designing Data-intensive applications" 5, Replication Read "Designing Data-intensive applications" 3&4, Storage, Retrieval, Encoding Read "Designing Data-intensive applications" 1&2, Foundation of Data Systems Three cases of binary search TAMU Operating System 2 Memory Management TAMU Operating System 1 Introduction Overview in cloud computing 2 TAMU Operating System 7 Virtualization TAMU Operating System 6 File System TAMU Operating System 5 I/O and Disk Management TAMU Operating System 4 Synchronization TAMU Operating System 3 Concurrency and Threading TAMU Computer Networks 5 Data Link Layer TAMU Computer Networks 4 Network Layer TAMU Computer Networks 3 Transport Layer TAMU Computer Networks 2 Application Layer TAMU Computer Networks 1 Introduction Overview in distributed systems and cloud computing 1 A well-optimized Union-Find implementation, in Java A heap implementation supporting deletion TAMU Advanced Algorithms 3, Maximum Bandwidth Path (Dijkstra, MST, Linear) TAMU Advanced Algorithms 2, B+ tree and Segment Intersection TAMU Advanced Algorithms 1, BST, 2-3 Tree and Heap TAMU AI, Searching problems Factorization Machine and Field-aware Factorization Machine for CTR prediction TAMU Neural Network 10 Information-Theoretic Models TAMU Neural Network 9 Principal Component Analysis TAMU Neural Network 8 Neurodynamics TAMU Neural Network 7 Self-Organizing Maps TAMU Neural Network 6 Deep Learning Overview TAMU Neural Network 5 Radial-Basis Function Networks TAMU Neural Network 4 Multi-Layer Perceptrons TAMU Neural Network 3 Single-Layer Perceptrons Princeton Algorithms P1W6 Hash Tables & Symbol Table Applications Stanford ML 11 Application Example Photo OCR Stanford ML 10 Large Scale Machine Learning Stanford ML 9 Anomaly Detection and Recommender Systems Stanford ML 8 Clustering & Principal Component Analysis Princeton Algorithms P1W5 Balanced Search Trees TAMU Neural Network 2 Learning Processes TAMU Neural Network 1 Introduction Stanford ML 7 Support Vector Machine Stanford ML 6 Evaluate Algorithms Princeton Algorithms P1W4 Priority Queues and Symbol Tables Stanford ML 5 Neural Networks Learning Princeton Algorithms P1W3 Mergesort and Quicksort Stanford ML 4 Neural Networks Basics Princeton Algorithms P1W2 Stack and Queue, Basic Sorts Stanford ML 3 Classification Problems Stanford ML 2 Multivariate Regression and Normal Equation Princeton Algorithms P1W1 Union and Find Stanford ML 1 Introduction and Parameter Learning

React basics

2018-04-13

React tutorial

Official guide: https://reactjs.org/.

Component

A component is an independent, reusable piece of UI. A page can have multiple components and they can be nested.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSX

It can make components much cleaner to understand. JSX can be translated to compiled JS code on babel.

const App = () => {
    return (
      <div>Hi!!
      </div>
    );
}

React example

Main app

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';

// a component
const App = function() {
    return <div>Hi!!</div>;
}
// another way with ES6 syntax
const App = () => {
    return (
      <div>Hi!!
      </div>
      <div>
        <SearchBar />
      </div>
    );
}

// render component App to the target node
ReactDOM.render(<App />, document.querySelector('.container'));

A sub component

// components/search_bar.js
import React from 'react';

const SearchBar = () => {
  return <input />;
};

// export component
export default SearchBar;
Use class
import React from 'react';
class SearchBar extends React.Component {
  // a function, called when rendering, return JSX
  render() {
    return <input />;
  }
}
export default SearchBar;

ES6:

import React, { Component } from 'react';
const Component = React.Component;

class SearchBar extends Component {
  // a function, called when rendering, return JSX
  render() {
    return <input />;
  }
}
export default SearchBar;

HTML

HTML file:

<!-- index.html-->
...
<body>
<!-- target div, as the root node of the react application-->
  <div container="container"></div>
</body>
...

Events

Create event handler for component, inside class.

import React, { Component } from 'react';
const Component = React.Component;

class SearchBar extends Component {
  // a function, called when rendering, return JSX
  render() {
    // onChange(a property, predefined)={the event handler}
    return <input onChange={this.onInputChange}/>;

    // lambda func
    return <input onChange={(event) => console.log(event.target.value)}/>;
  }

  // run the code whenever the input changes
  // event is an event object
  onInputChange(event) {
    console.log(event.target.value);
  }
}
export default SearchBar;

States

State is a kind of plain JS object that can record or react to use events. Each class-based Component defined has its state object. Whenever a component state changes, the component immediately re-renders and all its children.

import React, { Component } from 'react';
const Component = React.Component;

class SearchBar extends Component {
  // constructor
  constructor(props) {
    super(props);

    // create a new object and assign to state
    this.state = { term: '' };
  }

  // a function, called when rendering, return JSX
  render() {
    return (
          // predefined setState method
      <div>
        <input onChange={event => this.setState({ term: event.target.value })} />
        Value of input: {this.state.term}
      </div>
    );
  }
}
export default SearchBar;

Controlled field

The value of controlled field is set by the state rather than the other way around.

  1. User action triggers the events
  2. Event handler can update State
  3. The value of field is actually some state variables
import React, { Component } from 'react';
const Component = React.Component;

class SearchBar extends Component {
  // constructor
  constructor(props) {
    super(props);

    // create a new object and assign to state
    this.state = { term: '' };
  }

  // a function, called when rendering, return JSX
  render() {
    return (
          // value= makes input to be a controlled field,
          // the value only change when state changes
          // setState() will cause rerender
      <div>
        <input 
          value={this.state.term} 
          onChange={event => this.setState({ term: event.target.value })} />
      </div>
    );
  }
}
export default SearchBar;

Props

We can pass variable from parent object to child object with props. props can be null while initializing. A check is needed.

We can pass a callback function from parent to its child or even deeper, for example, onVideoSelect. (App => VideoList => VideoListItem)

Parent

// for add latency
import _ from "lodash";

//...
  constructor(props) {
    super(props);

    this.state = {
      video: [],
      selectedVideo: null
    }
  }
  render() {
    // ...
    // add latency, can only be called once every 300 ms
    const videoSearch = _.debounce(term => {
      this.videoSearch(term);
    }, 300);
    // pass onVideoSelect to the props of VideoList
    return (
      <div>
        <SearchBar onSearchTermChange={videoSearch} />
        <VideoDetail video={this.state.selectedVideo}/>
        <VideoList 
          videos={this.state.videos} 
          onVideoSelect={selectedVideo => this.setState({selectedVideo})}/>
      </div>
    );
  }

  videoSearch(term) {
    //... setState(videos, selectedVideo)
  }

Child

class VideoList extends Component {
  constructor(props) {
    super(props);
    // the object will arrive as props
    // use this.props for class-based component
    const videoItems = this.props.videos.map((video) => {
      // need to make those objects different with different keys
      return (
        <VideoListItem 
          key={video.etag} video={video} 
          onVideoSelect={this.props.onVideoSelect}/>
      )
    });
    return (
      <ul>
        {videoItems}
      </ul>
    );
  }
}

SearchBar:

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { term: "" };
  }

  render() {
    return (
      <div className="search-bar">
        <input
          value={this.state.term}
          onChange={event => this.onInputChange(event.target.value)}
        />
      </div>
    );
  }

  onInputChange(term) {
    this.setState({ term });
    this.props.onSearchTermChange(term);
  }
}

export default SearchBar;

Grandson

// ES6 flavor, can just use extract video from props
const VideoListItem = ({video, onVideoSelect}) => {
  // do onVideoSelect() when onClick
  return <li onClick={() => onVideoSelect(video)}>video.videoId<li>;
};

React Native

A guide can be found at https://facebook.github.io/react-native/.

Redux Readme

Redux is a predictable state container for JavaScript apps. The help doc is https://redux.js.org/.

Redux uses a single object to manage many application states.

Reference

This is my learning note while catching udemy React Redux Course. Credit to the instructor.


Creative Commons License
Melon blog is created by melonskin. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
© 2016-2024. All rights reserved by melonskin. Powered by Jekyll.