yo react-library-component
- Follow prompts
or
yo react-library-component [ComponentName] [component type (class or function)]
- Follow prompts
-
Each time you run
yo react-library-component
the generator will check for a set of required configurations in youryo-rc.json
file including:- libraryName: the name of your library (enter as space seperated words, the generator will pipe and title case them as needed)
- componentsRoot: The folder that you want to develop your react components from
- libraryBuildPath: The folder that you want babel to place your compiled components in. This config is used in a generated npmignore file - set to ignore everything except for this compiled folder
-
The generator also checks the root of your library for the following files, if they exist it does not edit them. If they don't exist, it will create them with some basic defaults:
- README.md - If no readme exists you will get a basic starting point with instructions on creating and using components based on your initial configurations
- package.json - If no package.json exists you will get a basic starting point based on your initial configurates. If you already have one, make sure it includes the following packages:
- react (dependency)
- react-dom (dependency)
- babel-cli (dev-dependency)
- babel-preset-react (dev dependency)
- babel-preset-stage-0 (dev dependency) Also add this to the script section:
"scripts": { "create": "babel [libraryRoot] --out-dir [buildFolder] --copy-files" }
Where
libraryRoot
is your component development folder andbuildFolder
is your component build folder- .npmignore - will create basic implementation if this file doesn't already exist.
- .gitignore - will create basic implementation if this file doesn't already exist.
- .yo-rc.json - will hold your config options set during initial run of generator
- /componentsRoot/global_style_variables.scss - is placed in your development folder - this file will be imported into each component's scss file to allow access to any placeholders, mixins, and variables you may want to share between components (to avoid duplicated code these files should not include any actual css rules, only variables, mixins, and placeholders).
- /componentsRoot/index.js - this file is appended to each time you create a new component and is used to map each component to it's folder so that consumers of your library do not have to understand your file tree to make use of a component.
After initial run, the following files are created each time you create a new component
- index.js file basic react component - function or class scaffolded depending on user input. automatically imports component style sheet & creates wrapper div
- style.scss file that automatically imports global style variables & creates wrapping class
- package.json for the component