Today I Learned August 24th

[farhan310]

Today I Learned:

React

• When working with React, the opening and closing tags must be the same element. For example, if you are opening with a div then you must also close with a div.

• Adding classes to elements in React uses the attribute className

• Parcel is a bundler that allows us to combine our code and all its dependencies into one file.

• We also learned today that you can apply inline CSS styling to JSX elements

• Event listeners in React are put within JSX elements the same way we have assigned attributes in html. An example of this would be: <div onClick={handleClick}>

• Using parcel we have access to the latest javascript syntax, one of which is "module exports".

Here is an example of using React in order to change an object once a button is clicked:

const Product = props => {
  const [isProductCooked, setIsProductCooked] = React.useState(false);
  const { raw, cooked } = props;

  const cookTheProduct = () => setIsProductCooked(true);

  return (
    <div>
      <h1 id="product">{isProductCooked ? cooked : raw}</h1>
      <button type="button" onClick={cookTheProduct} disabled={isProductCooked}>
        {isProductCooked ? 'Cooked' : 'Cook it!'}
      </button>
    </div>
  );
};