Wall Street React

Sandbox application in React about stock exchange.

Setup

npm install

Usage

npm start
npm run lint

Conventions

Folders & Files structure

• app/
  • index.js (entry point)
  • app.jsx
  • alt.js (Flux dispatcher instantiation of Alt)
  • routes.jsx (Routes configuration of React Router)
  • components/
    • component/
      • actions.js
      • store.js
      • component.jsx
• public/
  • index.html
  • styles/
  • images/
  • fonts/
• build/
• ... (config files like webpack.config.js and dev files like server.js)

Components

There are 2 types of components:

• Containers (UserPage, FollowersSidebar, StoryContainer, FollowedUserList)
  • wrap one or more dumb or smart components
  • hold state from Flux stores and pass it as objects to dumb components
  • call Flux actions and provide these as callbacks to dumb components
  • never have their own CSS styles
  • rarely emit DOM of their own, use dumb components for layout
• Views (Page, Sidebar, Story, UserInfo, List)
  • have no dependencies on the rest of the app, e.g. Flux actions or stores.
  • often allow containment via this.props.children.
  • receive data and callbacks exclusively via props.
  • have a CSS file associated with them.
  • rarely have their own state.
  • might use other dumb components.

from Dan Abramov