My personal (opiniated) template for React projects. This is very much geared towards what I need in my React project, so it may not fit your use case.
Btw: I really love red rectangles.
This is not universal/isomorphic.
- Webpack (with webpack-dev-server and several loaders)
- CSS Modules
Prerequisite: Node.js needs to be installed.
- Clone this repository
- Navigate into this repository and do
npm startstarts the development server (with hot module reloading and those kind of things...)
npm run builddoes a minified build of everything.
Deployment for Github Pages and Gitlab Pages is integrated.
- Github Pages: Type
npm deployto deploy to Github Pages.
- Gitlab Pages: Gitlab CI will automatically pick up the
.gitlab-ci.ymlfile and deploy once it creates a successful build
Caveats with Gitlab Pages: For some reason, some node modules won't install with Gitlab CI, particularly
Export name = Filename
- Folder name like
index.jsas the entry point to the component which combines the component itself with the styles
MyComponent.jsis the component itself and should export the React component
styles.lessthat contains the stylesheets for the component
Tests are using AVA + Enzyme, Coverage through NYC
babel instead of
req.keysfor dynamically loading files. It's too Webpack-specific and relies on the fact that everything will be transformed into CommonJS modules. It won't work with Webpack 2's tree shaking and while manually taking care of the dependencies feels like a hassle, it's safer (and can be internally optimized by bundlers) in the long run.
Where I want to improve
react-proxyor something similar to enable code splitting for React component and/or screens