Component Archetype Structure
In the previous component archetype, we used
demo-server to demo and test the React component inside of the component itself, which adds a risk of confusion. To clarify, we removed
demo-server for the component archetype to target the build, eslint check, and unit tests.
At the same time, in the new electrode components, we demonstrate components using
<repo>/demo-app where we import components from
<repo>/packages/<componentName>. The latest electrode components can be generated by the latest electrode-generator.
The new structure of the Electrode React Component Archetype is shown below.
- electrode-archetype-react-component |- config/ | |- babel | |- browser_test | |- dependencies | |- eslint | |- istanbul | |- karma | |- stylint | |- webpack | |- partial | |- babel.js | |- define.js | |- fonts.js | |- images.js | |- json.js | |- optimize.js | |- sourcemaps.js | |- styles.js | |- webpack.config.coverage.js | |- webpack.config.dev.js | |- webpack.config.js | |- webpack.config.test.js | |- archetype.js |- scripts/ |- archetype-clap.js |- xclap.js |- package.json ...
The Component Archetype still provides babel, eslint, karma and webpack configuration files as before, and the files can be found in the
electrode-archetype-react-component/config directory. But there are some updates for the webpack configuration files, which can be found in the Webpack Configuration section.