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

▶
react with django
SMART_READER_LITE
LIVE PREVIEW

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

Jul 26, 2023 952 likes •1.05k views

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

slide-1
SLIDE 1

React with Django

Walkthrough an example application John Baldwin Django Boston - July 2016

slide-2
SLIDE 2

Overview

  • System overview
  • Django API server (code walkthrough)
  • React single page application (SPA)
  • Tech stack
  • structure
  • code walkthrough

https://github.com/johnbaldwin/timelog_react_django

slide-3
SLIDE 3

Browser (client)

System Overview

React SPA Django API Server Webpack dev server

Serves app bundle XHR (AJAX)

slide-4
SLIDE 4

App Components

Main(app container) EventsPanel [Events] NewEvent

slide-5
SLIDE 5

React app tech stack

  • Node.js/NPM
  • React
  • Alt.js (implementation of Flux)
  • Webpack (build/bundler tool)
  • Yeoman generator
  • generator-react-webpack-alt
slide-6
SLIDE 6

Extras

slide-7
SLIDE 7

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