Let's build a WebApps UI using React, No Slides / Just Code
- start the create-react-app devserver:
npm run start (o yarn run start)
- a browser is suddenly opened on http://localhost:3000
- what secrets are hidden inside "src/App.js"
- what is this weird import syntax?
- are css and svg file imported as javascript modules?
- open the devtools and inspect the page for clues
- why are HTML and JS syntax mixed in this JavaScript file?
- className? why not class?
- what are the expressions inside the curly brackets
- what happens if we make a change into the App.js file
- what happens with errors? well, it depends... which kind of errors?
- build errors vs. runtime errors
- React Component
- the render method
- short component syntax (stateless react components)
- the component props
- React DevTools
- what about index.js?
- ReactDOM.render
- the virtual DOM and the component life cycle
- componentDidMount and ReactDOM.findDOMNode
- refs and event handlers
- state vs. props
- props.children
- setState
- key
- Flux pattern and unidirectional state management
- redux-store.js
- actions, reducers and store
- Provider, components vs containers, connect, mapStateToProps, dispatch
- Redux DevTools
- Redux DevTools extension
- MobX vs. Redux
- MobX observable (and the extendObservable helper)
- MobX React observer
- MobX DevTools
- testing React with Jest
- smoke tests, shallow rendering tests with enzyme, Jest snapshot tests