thomasjohns / djangocon-2017-react

Reacting the Right Way

DjangoCon 2017 - Spokane, WA

August 13, 2017

Coding Styles

• JS Linter: ESLint
• React: Airbnb Style
• Redux: Ducks & GitHub

Project Structure

• website
  • components
    • stateful
      • HomePage.jsx
      • TalkPage.jsx
      • Header.jsx
    • stateless
      • TalkRow.jsx
        • TalkOverview.jsx
        • VoteCountDisplay.jsx (since it inherits from Row or Page)
          • VoteArrow.jsx
          • VoteTally.jsx
        • CommentCountDisplay.jsx
      • TalkDetails.jsx
        • TalkOverview.jsx
        • VoteCountDisplay.jsx
        • CommentCountDisplay.jsx
        • TalkVideo.jsx
        • TalkDescription.jsx
      • CommentList.jsx
        • CommentItem.jsx
        • CommentForm.jsx
  • redux
    • index.js
    • talks.js (includes action_constants, reducer, normal action creators, async action creators)
      • reducer must be exported, aysnc action creator almost always, others optional)
    • users.js
    • votes.js
    • comments.js
  • api
    • base.js
    • helpers.js (normalization)

Redux Ducks Pattern

1. /talks

• action_constants
• reducers
• normal_action_creators
• async_action_creators (thunks or sagas)

Actions Reducers Constants

Ducks