React Concepts

MyButton.js

import React, { Component } from "react";
import withCounter from "../HOC/withCounter";
class MyButton extends Component {
  state = {};
  render() {
    return (
      <>
        <button onClick={this.props.incrementCount}>
          click me {this.props.count}
        </button>
      </>
    );
  }
}

export default withCounter(MyButton);

Prop-Types.js

import React, { Component } from "react";
import PropTypes from "prop-types";

const Test = props => {
  const lis = props.ary.map((val, ind) => <li key={ind}>{val}</li>);
  const users = props.aryOfObj.map((val, ind) => (
    <li key={ind}>
      name: {val.name} , age: {val.age}
    </li>
  ));
  return (
    <>
      <h1>{props.str}</h1>
      <h1>{props.strOrNum}</h1>
      <h1>{props.bool}</h1>
      <ul>{lis}</ul>
      <ul>{users}</ul>
    </>
  );
};

Test.propTypes = {
  str: PropTypes.string,
  strOrNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  bool: PropTypes.bool,
  ary: PropTypes.arrayOf(PropTypes.number),
  aryOfObj: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string,
      age: PropTypes.number
    })
  )
};

class App extends Component {
  render() {
    return (
      <>
        <Test
          str={"hello"}
          strOrNum={"ten"}
          bool={true}
          ary={[1, 2, 3]}
          aryOfObj={[{ name: "Raj", age: 10 }, { name: "Simran", age: 12 }]}
        />
        <div>Hello</div>
      </>
    );
  }
}

export default App;

PureComponents1.js

import React, { Component } from "react";

class MyPureComponent extends Component {
  state = {
    score: 0
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({ score: 0 });
    }, 2000);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.score === this.state.score) return false;
    return true;
  }

  render() {
    console.log("Updating Score");
    return (
      <>
        <div>{this.state.score}</div>
      </>
    );
  }
}

export default MyPureComponent;

PureComponents2.js

import React, { PureComponent } from "react";

// By default PureComponent does shallow comparing, so don't use this when state is complex
class MyPureComponent extends PureComponent {
  state = {
    score: 0
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({ score: 0 });
    }, 2000);
  }

  render() {
    console.log("Updating Score");
    return (
      <>
        <div>{this.state.score}</div>
      </>
    );
  }
}

export default MyPureComponent;

React-Concepts.md

Some Basic React Concepts snippets

• HOC's
• Pure Components
• prop-types in react
• refs
• ... e.t.c

redux-only.js

const { createStore } = require("redux");

initialState = {
  age: 21
};

const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "Add":
      newState.age += 1;
      break;
    case "Subtract":
      newState.age -= 1;
      break;
    default:
      break;
  }
  return newState;
};

const store = createStore(reducer);
store.subscribe(() => {
  console.log("state changed ", store.getState());
});

store.dispatch({ type: "Add" });
store.dispatch({ type: "Subtract" });
store.dispatch({ type: "unknownAction" });

refs.js

import React, { Component } from "react";

class App extends Component {
  handleSubmit = () => {
    console.log("submitted");
    alert(`firstname: ${this.firstname.value} 
    lastname: ${this.lastname.value}
    age: ${this.age.value}`);
  };

  handleKeyUp = (target, e) => {
    console.log(e.keyCode, target);
    if (e.keyCode === 13) {
      switch (target) {
        case "firstname":
          this.lastname.focus();
          break;
        case "lastname":
          this.age.focus();
          break;
        case "age":
          this.submit.focus();
          break;
        default:
          this.firstname.focus();
      }
    }
  };

  render() {
    return (
      <>
        <div>
          <Pure />
          <label>FirstName: </label>{" "}
          <input
            ref={input => {
              this.firstname = input;
            }}
            onKeyUp={this.handleKeyUp.bind(this, "firstname")}
            type="text"
          />
        </div>
        <div>
          <label>LastName: </label>{" "}
          <input
            ref={input => {
              this.lastname = input;
            }}
            onKeyUp={this.handleKeyUp.bind(this, "lastname")}
            type="text"
          />
        </div>
        <div>
          <label>Age: </label>{" "}
          <input
            ref={input => {
              this.age = input;
            }}
            onKeyUp={this.handleKeyUp.bind(this, "age")}
            type="text"
          />
        </div>
        <div>
          <input
            ref={input => {
              this.submit = input;
            }}
            onClick={this.handleSubmit}
            type="submit"
          />
        </div>
      </>
    );
  }
}

export default App;

withCounter.js

import React, { Component } from "react";

const withCounter = WrappedComponent => {
  return class WithCounter extends Component {
    state = { count: 0 };
    incrementCount = () => {
      this.setState({ count: this.state.count + 1 });
    };
    render() {
      return (
        <WrappedComponent
          count={this.state.count}
          incrementCount={this.incrementCount}
          {...this.props}
        />
      );
    }
  };
};

export default withCounter;