https://github.com/elementsweb/boilerplate-react-component
Boilerplate project for a React component
https://github.com/elementsweb/boilerplate-react-component
boilerplate component react
Last synced: about 2 months ago
JSON representation
Boilerplate project for a React component
- Host: GitHub
- URL: https://github.com/elementsweb/boilerplate-react-component
- Owner: elementsweb
- License: mit
- Created: 2018-04-19T17:29:16.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-19T18:51:57.000Z (about 8 years ago)
- Last Synced: 2025-04-04T15:52:29.385Z (about 1 year ago)
- Topics: boilerplate, component, react
- Language: JavaScript
- Homepage: https://elementsweb.github.io/boilerplate-react-component/
- Size: 410 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Boilerplate React Component
Project that's designed to be cloned when developing a new React component that can be used across projects.
This is currently designed for components that are built and transpiled as part of an applications webpack build.
## Demo
You can import your component into the storybook, a good place to showcase your component.
Run the storybook with `npm run storybook` and navigate to `http://localhost:6006` in your browser.
### Github Pages
Before commiting your changes to Github you can run `npm run build-storybook` to build the storybook so that it can be hosted on Github pages.
## Usage
Import the component/s into your project:
```javascript
import Button from 'MODULE_NAME';
```
Import the styles into your project also (in an existing SASS file):
```
@import "~MODULE_NAME/src/styles";
```
### Include JavaScript in Webpack build
Add the following code to `webpack.config.js` to resolve an absolute path to where your component is located:
```javascript
const componentModulePath = fs.realpathSync(
path.resolve(__dirname, 'node_modules', 'MODULE_NAME', 'src')
);
```
Then in the rule that transpiles code, include the path to your component:
```javascript
{
test: /\.jsx?$/,
use: ['babel-loader'],
include: [
path.resolve(__dirname, 'src'),
componentModulePath
]
}
```
### Include SASS in Webpack build
Add another path to include in the rule for SCSS files:
```javascript
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'src'),
componentModulePath
]
}
}]
}
```