|
1 | 1 | # npm-react-component-starter |
2 | 2 |
|
3 | | -Project sample prepared for publishing React components on npm |
| 3 | +Project sample prepared for create and publish React components on [npm](https://www.npmjs.com/) |
4 | 4 |
|
5 | 5 |
|
6 | 6 | ## Features |
7 | | -- Use webpack for building component |
8 | | -- Sass enabled (sass-loader) |
9 | | -- ES2015 enabled (babel) |
| 7 | +- Webpack for building |
| 8 | +- Sass ready (sass-loader). Just ```import 'your/sass/files.scss``` from your components |
| 9 | +- ES2016 enabled (babel loader). |
10 | 10 |
|
11 | 11 | ## Steps |
12 | 12 | 1. Clone the repo |
13 | 13 | 2. Change package name, author, etc in package.json |
14 | | -3. ```npm install``` |
| 14 | +3. Install all dependencies: ```npm install``` |
15 | 15 | 4. Create your components under ```src/components/``` |
16 | 16 | 5. Export them from from src/index.js: |
17 | | -6. Run ```npm run build``` |
18 | | -7. Run```npm publish``` (You must have an npm account) |
| 17 | +6. Make a build: ```npm run build``` |
| 18 | +7. Publish to npm: ```npm publish``` (You must have an npm account) |
| 19 | +8. You are ready to install the package with ```npm install my-react-components``` |
19 | 20 |
|
20 | 21 |
|
21 | 22 | ## Preview components during develop |
22 | 23 | In order to preview the component during development: |
23 | 24 | 1. Run ```npm start``` wich runs webpack in watch mode |
24 | 25 | 2. Create a symlink of the package: ```npm link``` |
25 | | -3. Create a new react project, for example with create-react-app |
26 | | -4. Install the package from the symlink ```npm link my-react-components``` |
27 | | -5. Import the component ```import { MyComponent } from 'my-react-components'``` |
| 26 | +3. Create a new react project, for example with [create-react-app](https://github.com/facebookincubator/create-react-app) |
| 27 | +4. Install the package from the symlink: ```npm link my-react-components``` |
| 28 | +5. Import the component: ```import { MyComponent } from 'my-react-components'``` |
| 29 | +6. Use it! ```<MyComponent />``` |
28 | 30 |
|
0 commit comments