OlivierJM

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

OlivierJM

const debounce = (func, delay) => {
  let inDebounce
  return function(...args){ // curry the the other arguments
    // const args = argumets
    const context = this
    clearTimeout(inDebounce)
    inDebounce = setTimeout(() => func.apply(context, args), delay)

OlivierJM

const debounce = (func, delay) => {
  let inDebounce
  return function(...args){ // curry the the other arguments
    // const args = argumets
    const context = this
    clearTimeout(inDebounce)
    inDebounce = setTimeout(() => func.apply(context, args), delay)

OlivierJM

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Pull Request Process

1. Ensure that the project is building successfully

OlivierJM

// class component with destructuring
class UserSection extends React.Component {
  render(){
    const { user, isActive } = this.props;
    return(
      <div>
        <p>{user.name}</p> <span>{isActive ? 'active' : 'offline'}</span>
      </div>
    )
  }

OlivierJM

// functional component with partial destructuring
const UserSection = ({ user, isActive }) => (
  <div>
    <p>{user.name}</p> <span> {isActive ? 'active' : 'offline'} </span>
  </div>
);

// functional component with no destructuring
const UserSection = props => (

OlivierJM

  getRemoteData = async () => {
    try {
      const coursePromise = axios('http://x.x.x.x/api/course/');
      const topicPromise = axios('http://x.x.x.x/api/topic/');
      const [ courses, topics ] = await Promise.all(coursePromise, topicPromise]);
      this.setState({
        courses: courses.data.data,
        topics: topics.data.data,
        loading: false,
      });

OlivierJM

function getData() {
  HTTP.call('GET', 'https://jsonplaceholder.typicode.com/posts', (err, res) => {
    if(err){
      console.log(err);
    } else {
     console.log(res); 
    }  
  });
  console.log('Going to grab data'); 
}

OlivierJM

function getData() {
  HTTP.call('GET', 'https://jsonplaceholder.typicode.com/posts');
  console.log('Going to grab data'); 
}

OlivierJM

function calculateExactAge(bornYear=1995, currentYear=2018){
  console.log(currentYear - bornYear);
}

calculateExactAge(); // 23
calculateExactAge(2010, 2020); // 10