React Web Template

Run

From root:

• cp .env.example .env
• npm install
• npm start

Generators

Creating new files from the command line should be quick and easy to skip over the tedium, encourage finer-grained modularization, and preserve consistency. The logic behind this is located in internals/generators and implemented with plop.

npm i -g plop

npm run generate

Things you can do:

• Create components / containers
• Create new redux modules (ducks)
  • this will not only generate the new module code, but import actions, reducers, and selectors into our app-wide pool
  • there is also an option to do the same for sagas

Redux Design

• The redux organization principle is based on ducks, which groups based on category. Conceptually, this regards the store as a data space decoupled from the views connected to it.
• Helpers residing in src/rdx/utils/propsMapping.js are used to make actions/data props mapping easy for redux connected components. Keys for selectors and actions can be easily updated.
  • This should help keep imports clean, reduce barrier to adjusting redux connection, and make it easier to divorce a component from redux altogether
  • this also enforces / makes easy the use of selectors, keeping that logic out of views and easy to refactor as data changes

Styling

• All components are wrapped with a class suffixed -rct-component, which guards against collision
• For passing down styles, if they don't make sense residing in the child component, components can take in props.className with a class whose styles are specified in the parent's style file

Async Redux

• wrapping saga logic with activeRequest adding and removal is available for request action tracking
• if request actions have an id parameter, views will be able to track particular instances that they fire off (see activeRequestExists in rdx/modules/activeRequests/selectors)

Routing

• navigation is tethered to redux, through which one can access state, currentQuery params, and fire actions

Environmental Variables

from root: cp .env.example .env Any env vars prefixed with REACT_APP_ will be accessible via process.env

Conventions

• suffixing react component classes with -rct-component to prevent collision
• render methods in React classes prefixed with render (e.g. renderList())
• prefix container specific rdx modules with camelCased container name (e.g. loginModalError)

Misc

• We aren't using anything like Immutable as of now, so be sure to not to mutate data in reducers!
• Webpack is set up to understand absolute paths (once the NODE_PATH environmental var is set), which may seem unnecessary sometimes but makes it easy to move things around if needed

Tools

• classnames
• redux-saga
• jest
• SASS
• redux-persist
• connected-react-router
• redux-dev-tools

ToDo

• styled-components
• grid
• nest redux type constants by module
• watch & recompile underscored sass files. also watch .env
• example app w/ test json endpts

---

This project was bootstrapped with Create React App.