Skip to content

Discussion Outline

Jump to bottom
Nathan Bridgewater edited this page Feb 11, 2020 · 2 revisions

Talking points

  • Intro: ES2015 exercise
    • functions:
      • function(a,b) {return a + b}
      • (a,b) => {return a + b}
      • (a,b) => a + b
      • (single args no parens): a => a + 5
    • JSX… In JS, parenthesis denote multiline JSX. i.e. (<div></div>). For inline, we can also write <div></div>. In functional React, we always return JSX. So our typical functions will look like:
      • (props) => {return (<div>{props.thing}</div>)}
      • simplified: props => (<div>{props.thing}</div>)
      • destructured (what you typically see): ({thing}) => (<div>{thing}</div>)
  • Start-simple: Starting with start-simple routes
    • JSX and the idea of components
    • Show CSS real-time updates; styling with SASS (bootstrap 4).
    • Show code real time-ish updates (reloads).
    • React manages ALL DOM manipulation. Like Backbone MVC view renders and model changes.
    • HTML-ish. JSX is XML, but with custom react methods which can referenced through their docs. Like onKeyDown, onChange, onClick, etc. unsafeInnerHtml (show this).
    • Cool thing is, if you do something wrong, React dev will tell you! (can show later during forms)
  • Start-layout: Code improvements; start simple, and break things out as you go.
    • Better improvements, encapsulate with a layout.
    • Active Nav (react-router)
    • Access to nav params via useParams
    • Start-people: let’s render some data!
    • Start with list-simple-page
    • Show the basics of rendering data, and full JSX
    • Switch router to list-page, and show how breaking components out simplifies.
    • Folders are important! Break component groups out into folders (you’ll see more later during forms)
    • Main idea: Most components are dumb rendering components. You should keep specific functionality contained within them. I like to handle Ajax at the top level and then let the sub-components handle showing, and editing values (see forms later).
  • Start-context: (Using App Context at different scopes)
    • This is a bit more advanced, but we can use components and share their data across other components that aren’t necessarily directly connected and without passing down props. (draw a diagram or pull up the React official docs one)
    • In example, we’re updating data in the background; and any components that want to listen to it, can have access to it.
    • (think: rating or our live event engine that listens to message events targeting them).
    • There can be multiple layers and different scopes.
  • Start-forms: Let’s show field inputs, validation using new styling (pseudo styles around valid or invalid; Mark probably knows).
    • Show a full form first. This is raw JSX all in one page with validation, Ajax and fields.
    • Switch to edit-page and show how we can break down components to simplify working on them.
    • Validator can be encapsulated in a re-usable validation component (ValidatedForm)
    • Fields can be broken out and we can setup shared styling in a specific scope and simplify how we place them on the Form
    • The Form now handles its own field state updating and when it’s validated and submitted, we can take the new value and send it back to the parent page to do persistence (or we can do it here); it’s our choice
    • I created several types of fields with workable inputs
    • Notice: we setup state in the form to monitor changes to hasHair. This form has several useEffects that run in order and at different times.
  • Webpack
    • Show the reporting tool for the final build (webpack plugin)
    • Show production build (non-source-mapped and tree-shaken).
    • Show HTML plugin rendering (hashed url to clear cache)
    • Show CSS rendering dev vs production (production exports CSS file minified)
  • Testing with Jest:
    • show some React render tests (jsdom is baked in).
    • docker-compose setup
Clone this wiki locally