Codemash 2018 – Real World React From The Ground Up

Presenter: Nathan Loding

  • Real World
    • Blog and Todo lists are example apps, but there are actual real apps that essentially do the same thing.
    • App we are building here points at an API, normalizes data and presents it as a ToDo list.  If you change api and normalization should be able to re-use this outside codemash.
  • What we are doing today
    • React
    • Redux
    • What we are not doing
      • tooling
      • syntax
      • testing
      • deploying
      • server side rendering
      • react native
      • css in JS (JSS)
  • What is React
    • React if a library for providing a view of data rendered as HTML
    • Abstracts DOM (Virutal Dom) , diffs changes and re-renders
    • Component hierarchy
  • Why use React
    • Small, fast, ‘single purpose’ library
    • Works well with other libraries
    • Reusable components fit easily into existing apps
    • Helpful error messages with JSX
      • JSX is you are writing html inside your javascipt instead of writing html with javascript inside.
    • Why Not use React
      • Looking for an all-in-one solution
        • Angular for instance
      • Morally opposed to JSX(html in js)
      • Morally opposed to Facebook
        • Licensing is wonky
    • On to coding, this is a lab afterall!
  • Notes from lab
      • You can do server side view rendering with React
      • RegisterServiceWorker
        • Preloads all statics files.  For ‘Progressive’ web apps, whatever that is.
      • You can import css in your app files in react, don’t have to put in html
      • React components have a life cycle, and state.  Most importantly they need a render method!
      • State is mechanism for react watching changes.
          • Have to set state object in constructor of component
          • Have to use setState method to update state object subsequently
            class App extends Component {
            
            constructor(props)
            {
            super(props)
            
            this.state = {
            counter: 0
            }
             this.increment = this.increment.bind(this)
            }
            
            increment()
            {
            this.setState({counter: this.state.counter + 1})
            }
        • Have to bind functions to component
          • Can do so using ‘bind’ in constructor
          • Can call using like lambda function in html
      • const versus class
        • can use a ‘const’ to return stateless, dumb html component.
    • What is Redux?
      • Manages state changes
      • Separate from react, can use with straight javascript, angular, whatever
      • Redux terminology
        • Has an event ‘store’
          • Components listen to events in the store they are interested in
          • action goes through ‘reducers’ that update the store
          • Components dispatch ‘actions’, they are reduced an update the ‘store’ which components listen to for particular actions.
          • reducers seem to be partitions in the store you access to for listening and dispatching to.
        • Map store state properties to component properties and that causes them to listen to and update when those store state properties change
      • React has a lifecycle
        • Can call methods to run at different life cycle events, to kick off getting data and such.
        • action creators are event firings essentially

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *