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