Create-react-ui NPM

create-react-ui

The cli to create a react component library project.

Quick Overview

yarn create react-ui my_library_app
cd my_library_app
yarn start

Creating an React Component Library project

npx

npx create-react-ui my_library_app

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-ui my_library_app

npm init <initializer> is available in npm 6+

yarn

yarn create react-ui my_library_app

yarn create is available in Yarn 0.25+

It will create a directory called my_library_app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── cru.config.js
├── README.md
├── node_modules
├── package.json
├── .env.production
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
├── components
│   ├── Button
│   │   ├── index.(jsx|tsx)
│   │   ├── index.md
│   │   ├── demo
│   │   │   ├── basic.md
│   │   │   └── basic2.md
│   │   └── style
│   │       └── index.scss
│   ├── common
│   │   └── index.scss
│   └── style
│       ├── index.scss
│       ├── colors
│       │   └── index.scss
│       ├── mixins
│       │   └── index.scss
│       └── themes
│           └── default.scss
├── doc
│   ├── quickStart.md
│   └── test.md
└── libraryStatic
    ├── LICENSE
    └── README.md

Once the installation is done, you can open your project folder:

cd my_library_app

Inside the newly created project, you can run some built-in commands:

`npm start` or `yarn start`

Runs the doc app in development mode. Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.

`npm run build` or `yarn build`

Builds the doc and the library for production to the build-doc and build-library folder. It correctly bundles React UI Library Document in production mode and optimizes the build for the best performance. It will correctly build your project into a releasable UI component library

The doc build is minified and the filenames include the hashes. Your doc is ready to be deployed! Your library is ready to be deployed!