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
- Looking for an all-in-one solution
- 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
- Has an event ‘store’
- 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
-