React with Django Walkthrough an example application John Baldwin - PowerPoint PPT Presentation

React with Django Walkthrough an example application John Baldwin Django Boston - July 2016

Overview https://github.com/johnbaldwin/timelog_react_django • System overview • Django API server (code walkthrough) • React single page application (SPA) • Tech stack • structure • code walkthrough

System Overview Serves app bundle Webpack dev server React SPA XHR (AJAX) Django API Server Browser (client)

App Components Main(app container) EventsPanel [Events] NewEvent

React app tech stack • Node.js/NPM • React • Alt.js (implementation of Flux) • Webpack (build/bundler tool) • Yeoman generator • generator-react-webpack-alt

Extras

Yeoman • http://yeoman.io/ • Yeoman is an application/project generator environment and command line tool. You use specific generators to scaffold projects, in whole or part • To create a new project: • yo <generator> • react-django-alt generator • provide application name • choose a default style (css, sass, scss, less, stylus) • Option to enable PostCSS