08/24 Day 20 Lecture Notes

[Limlight86]

08/24 Day 20 Lecture Notes

React Intro

const jsxElement = <h1>Hello World</h1>

ReactDOM.render(jsxElement, document.getElementById('root'))

• React is a Javascript Library for building out UI
• React is a fantastic tool for breaking a large project into small atomic re-usable pieces known as "components"
• React allows you to write HTML inside Javascript using a special syntax called JSX
• JSX is not native to browsers, it must be compiled into HTML and JS, this is handled by libraries that we will be bringing in.
• In order to render react code, you will need both the react and reactDOM package.
• ReactDOM.render(what_to_render, where_to_render) is how react "mounts" the DOM. It takes two arguments, what to render, and where to render
  • what to render- This is always a jsx element/component
  • where to render - An html element, typically a div with the id root
• event listeners in react are added onto JSX elements the same way you would assign an attribute in html. The only difference is the casing should be camelCased -> <div onClick={handleClick}>
• Boiler plate react html set up: https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

const jsxElement = (
  <div className="container">
    <h1>Hello World</h1>
    <img src="some_url" />
  </div>
)

ReactDOM.render(jsxElement, document.getElementById('root'))

• When writing JSX, the opening and closing tags must be the same element. Wrap everything in a div for example.
• Adding classes to elements in React uses the attribute className
• Closing tags are required in JSX, self close tags

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

• There are 3 script tags in the head, which will be required to make react work.
  • React - The entire React library
  • React-DOM - A peer dependency for React that allows react to mounts the DOM
  • Babel - the compiler that is able to translate the JSX into its steerage components at runtime.

React Components

const MyCounter = () => {
  return <h1>Hello World!</h1>
}

• React components are javascript functions that return JSX (There are other types of components but we won't be covering them as they have fallen out of favor over the years)
• To render a component, you would use it similar to a self-closing html tag -> <MyCounter />

const Header = () => <h1>This is the header</h1>

const Content = () => (
  <div>
    <p>Some random content here</p>
  </div>
)

const Footer = () => {
  return <h3>Footer Stuff</h3>
}

const App = () => (
  <div>
    <Header />
    <Content />
    <Footer />
  </div>
)

ReactDOM.render(<App />, document.getElementById('root'))

• Components can render other components
• In the example above, App renders Header, Content, and Footer. Then ReactDOM.render only renders App, which will subsequently render all the children

JSX Expressions

const Example = () => {
  return (
    <div>
      <h1>1 + 1</h1>
      <h2>{1 + 1}</h2>
    </div>
  )
}

• In order to use javascript in the return of a react component, you must use the special jsx expression syntax denoted by a set of {}
• the text content inside of the h1 will be treated as plain text
• the text content inside of the h2 will be treated as javascript i.e the + operation will be performed
• The only valid data types in jsx are string | array | jsx. Anything else will need to be wrapped inside a jsx expression otherwise it will be either ignored or coerced to a string

React State

const [reader, writer] = useState(defaultState)

• state is a way to update react components by causing a re-render
• useState returns an array of two elements, the reader and writer
  • reader is the current value of state
  • writer this is a function that updates state. -> writer(newState)
• The argument passed into useState is the default value for state.

const Counter = () => {
  const [currentNumber, setCurrentNumber] = React.useState(0);

  return <h1>I am a counter. My current number is {currentNumber}</h1>
}

• currentNumber is our reader
• setCurrentNumber is our writer
• 0 is the default value i.e the value that currentNumber will startoff as
• Everytime setCurrentNumber is called, the currentNumber will change accordingly

const Counter = () => {
  const [currentNumber, setCurrentNumber] = React.useState(0);

  const updateCurrentNumber = () => setCurrentNumber(100);

  return (
    <div>
      <h1>The current number is {currentNumber}</h1>
      <button onClick={updateCurrentNumber}>Change number to 100</button>
    </div>
  )
}

• Clicking on the button will call setCurrentNumber passing in 100. When this happens the component will re-render and after the re-render finishes, currentNumber will be updated to 100

Javascript Stylesheet (JSS)

<div className="burger" style={{ display: 'grid', columnGap: 5 }}>

• You can apply inline styling to jsx elements
• Although there are some variants to the syntax
  • Any properties that were previously kebab-cased like column-gap should be camelCased for JSS i.e columnGap
  • All values should be stringified. The only exceptions are numbers, but these will always default to pixel.

Parcel

• Parcel is a bundler that allows you to combine your code and all its dependencies into one file.
• Parcel is usually added a dev dependency because it is not actually required in your code, but it just allows you to run the app locally -> yarn add parcel -D
• The command to run a file using parcel is parcel file_name

import React from 'react'

• Using parcel we have access to the latest javascript syntax, one of which is "module exports". This allows you to use the special import and export syntax that is not available in node. This is functionality the same as require
• • Webpack and Parcel are tools that we will be using to pre-compile our React code before runtime, to improve performance.

Event Listeners / Event Handlers / Forms

const WhopperBar () => {
  const [age, setAge] = React.useState('');

  const handleUserInput = event => {
    const newAge = Number(event.target.value);
    setAge(newAge)
  }

  const handleFormSubmit = event => {
    event.preventDefault();

  }

  return (
    <div>
      <h1>Welcome to the Whopper Bar</h1>
      <form onSubmit={handleFormSubmit}>
        <label>How Old Are you</label>
        <input type="number" min="1" requireds value={age} onChange={handleUserInput} />
    </div>
  )
}

• Just like vanilla javascript event listeners, you must pass a function as the value. This can be a named function or an anonymous function -> <div onClick={() => console.log('anonymous func')}>
• The argument that will always be passed in when the listener is triggered/handled is an event object.
• Typical use cases for the event object may be to derive the value of an input's change evnet -> event.target.value or to prevent the default behavior of a form submit event.preventDefault()
• Its important to note that the onSubmit event goes on the form tag and NOT the submit button
• The only real difference between jsx and vanilla javascript is the casing for the listeners and the {} jsx expression syntax.
• Something you can leverage in react is the value attribute on certain input types. You can passed a controlled value to an input element. A controlled value is a state value i.e a value that you control via state.

Props

  const Counter = props => {
    return (
      <div>
        <h1>This is the {props.title} counter</h1>
      </div>
    )
  }

  const App = () => (
    <div>
      <Counter title="burger" />
      <Counter title="coffee" />
      <Counter title="chicken sandwich" />
    </div>
  )

• props short for "properties" is how data is passed from parent -> child in react.
• props are very similar to html attribute. They are even assigned the same way, on the component's tag
• props follow a key value pair -> <SomeComponent key="some value">
  • The name of the prop above is key and the value is the string some value
• When a component "receives" props, it is accessible in the function's parameter
• THe parameter can be called anything because at the end of the day is just a javascript function parameter. But by convention we usually call it props
• The props parameter will always be supplied. But it will be an empty object until props are passed from the parent.
• In the example above, the App (parent) is passing unique title prop to each of the Counters, i.e burger, coffee, and chicken sandwich
• In order for the Counter component to access the title prop, it simply needs to reference it by calling props.title
• You can pass anything as props, even other components!
• props are a great way to make the same component unique and reusable!