Skip to content
Some small example code for the React/Redux/MobX presentation
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

GeekEvening: React

Let's build a WebApps UI using React, No Slides / Just Code

step 01

  • 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

step 02

  • what about index.js?
    • ReactDOM.render
    • the virtual DOM and the component life cycle
    • componentDidMount and ReactDOM.findDOMNode
    • refs and event handlers

step 03

  • state vs. props
    • props.children
    • setState
    • key

step 04: redux

  • 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

step 05: mobx

  • MobX vs. Redux
  • MobX observable (and the extendObservable helper)
  • MobX React observer
  • MobX DevTools

bonus step

  • testing React with Jest
  • smoke tests, shallow rendering tests with enzyme, Jest snapshot tests
You can’t perform that action at this time.