React.js

Resources

• https://www.joyofreact.com/
• https://react.gg/?s=usehooks

Disadvantages

• Not SEO friendly, since web crawler may not execute javascript and hence SEO is bad for dynamic web pages and SPA which do not change the URL

React keys

• A key is a special string attribute that needs to be included when using lists of elements.
• Do not use array index as key, as it is not recommended and deleting, changing order will cause react to get confused. Reference
• Keys used within arrays should be unique among siblings. They need not be globally unique.

Controlled and Uncontrolled Component

• Controlled Component:
  • The value of the input element is controlled by React.
  • Example of Controlled <input> field:

function FormValidation(props) {
  let [inputValue, setInputValue] = useState("");
  let updateInput = (e) => {
    setInputValue(e.target.value);
  };
  return (
    <div>
      <form>
        <input type="text" value={inputValue} onChange={updateInput} />
      </form>
    </div>
  );
}

• Uncontrolled Component:
  • The value of the input element is handled by the DOM itself.
  • Example of Uncontrolled <input> field:

function FormValidation(props) {
  let inputValue = React.createRef();
  let handleSubmit = (e) => {
    alert(`Input value: ${inputValue.current.value}`);
    e.preventDefault();
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" ref={inputValue} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Props vs State

• props are immmutable while state is mutable