-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
g.lariviere
committed
Feb 27, 2018
1 parent
33f3475
commit 6de7c17
Showing
2 changed files
with
76 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
docs | ||
src | ||
config | ||
.babelrc | ||
webpack.config.js | ||
.eslintrc |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,76 @@ | ||
# React-Library-Stater-Kit | ||
|
||
Boilerplate to building a React components library for NPM | ||
|
||
## How to start ? | ||
|
||
#### Setup you development environement | ||
|
||
```bash | ||
git clone [email protected]:hqro/React-Library-Stater-Kit.git | ||
cd React-Library-Stater-Kit | ||
yarn install | ||
``` | ||
|
||
#### Rename project and initialize your git repository | ||
|
||
```bash | ||
cd .. | ||
mv React-Library-Stater-Kit my-components-library | ||
cd my-components-library | ||
rm -Rvf .git | ||
git init | ||
git remote add ... | ||
``` | ||
|
||
Don't forget to edit the `package.json`. Add your dependencies and customize `name`, `description` and `author`. | ||
|
||
## How to use ? | ||
|
||
```bash | ||
yarn start | ||
``` | ||
|
||
`webpack` now wath for file changes in `src/components` folder. Each time you add a new component, it will compile your source files again. Don't forget to export your components on `index.js` file. | ||
|
||
|
||
## How to test ? | ||
|
||
```bash | ||
yarn link | ||
``` | ||
|
||
This command is run in the package folder you’d like to link. Then initialize a new react project with `create-react-app` for example | ||
|
||
```bash | ||
cd .. | ||
create-react-app Demo | ||
cd Demo | ||
yarn link my-components-library | ||
``` | ||
|
||
Then go to you React project and try to import your components. | ||
|
||
```javascript | ||
import React from 'react' | ||
import { Button } from 'my-components-library' | ||
|
||
const App = () => ( | ||
<div className="App"> | ||
<Button | ||
label="Awesome button" | ||
onClick={() => console.log('click')} | ||
/> | ||
</div> | ||
) | ||
``` | ||
|
||
## How to build for production ? | ||
|
||
```bash | ||
yarn build | ||
yarn login | ||
yarn publish --access=public | ||
``` | ||
|
||
You need a NPM account to publish your package |