- Requirements
- Project Setup
- Basic Usage
- Design Principles
- Workflow
- Troubleshooting
- Multiple React Detected
- node
- npm or yarn
Transpile:
- Babel
Lint:
- ESLint
Bundle:
- Webpack
Automate:
- Webpack
Typecheck:
- Flow
Test:
- AVA
- Enzyme
- Sinon
Development:
- React Storybook
Application:
- React
- Mapbox GL
- D3
- Tachyons
.
├── dist/ # compiled files for distribution as an npm package
├── app/ # compiled files as a standalone interactive module
└── src/
├── app/ # files and configs for `storybook`
└── lib/ # where the components live
├── SomeComponent
│ ├── index.js # source file for components
│ ├── story.js # story
│ └── test.js # test
└── index.js # entry point to the components library
# install dependencies
npm install
# run watcher to monitor file changes and execute test cases automatically
npm run test
# run `storybook` for development
npm run dev
# compile source code in ./src/lib to ./dist for production-ready version for distribution
npm run build:lib
# compile source code in ./src/app and ./src/lib to ./app for standalone interactive module
npm run build:app
Notice under the Structure section that the component directory consists of only three js
files. That’s all we need to start on developing a components.
Tachyons
proclaims itself to be an implementation of functional CSS. Well, CSS classes are composable to begin with, so what Tachyons
brings to the table is the design decision of atomic CSS classes and also the idea of immutability within these classes. It also allows us to have a components library that is completely free of CSS dependencies. Although there is still a development dependency on ui-tachyons-dark
, there are no CSS dependencies in production, and this we can easily theme and deploy other Tachyons
variants and extensions.
- create component directory
- create
index.js
,story.js
&test.js
- create stories in
story.js
and run them thoughReact Storybook
- work on
index.js
- create more stories and repeat
- create tests in
test.js
and repeat
This happens when developing multiple components in parallel on a local machine and using npm link
to symlink the separate libraries together. The depended library would find a copy of react
in its own node_modules
and reference to that copy instead.
To solve this, add the following to your webpack
configuration:
const { resolve } = require('path')
module.exports = {
...,
resolve: {
alias: {
react: resolve(__dirname, 'node_modules/react')
},
symlinks: false
}
}