|
1 | 1 | # React Component Templates, React Native Component Templates, Express Templates, Node Module Templates and Starters
|
2 | 2 |
|
3 |
| -## How to use NPM scripts to save time and automate tasks on React and other JS projects like React native, Angular or Express? |
| 3 | +NPM package to easly create modules and components using your own templates(several pre-loaded as well) for any js project. Also give you the option to quickly edit the template according to your project. |
4 | 4 |
|
5 |
| -CLI script to create React and React Native component creator tool for creating the component file and other files like CSS module. Also give you the option to quickly edit the template according to your project. But of you can use this in any other JS repos like angular or Node. |
6 |
| - |
7 |
| -Imagine working on a project with more than 100s of react components. how good we can create components using an npm task inside the project. This way, it will save time and helps to maintain consistency throughout the files. And of course, you can approach this in various ways. Such as |
| 5 | +Imagine working on a project with more than 100s of react components. how good if we can create components using a npm task inside the project. This way, it will save time and helps to maintain consistency throughout the files. And of course, you can approach this in various ways. Such as |
8 | 6 |
|
9 | 7 | - Create and template file type on the code editor.
|
10 | 8 | - Use a plugin that gives snippets for the code editor.
|
11 | 9 |
|
12 |
| -The way I see it is when you work with multiple different teams on different projects, it is always useful to have isolated project standers that can be easily adjustable for the whole team. |
| 10 | +The way I see it is when you work with multiple different teams on different projects, it is always useful to have isolated project standerds that can be easily adjustable for the whole team. |
| 11 | + |
| 12 | +Example: |
| 13 | + |
| 14 | +lets say on a react project whenever we create an functional componant we do follwing steps. |
| 15 | + |
| 16 | +1. create a folder with component name - Login |
| 17 | +2. create 3 files inside this folder - Login.tsx, Login.module.css, Login.test.ts |
| 18 | +3. create basic code structures on each of those files with relevent class names and module names. |
| 19 | + |
| 20 | +what this tool does is automate this whole process. you and your team team can create a template you like and this tool will create files with the name you input and replace the content in your template files whenever you create a new module. |
| 21 | + |
| 22 | + |
13 | 23 |
|
14 |
| -####Install |
| 24 | +#### Install |
15 | 25 |
|
16 |
| -`npm i react-react-native-component-node-module-templates` |
| 26 | +`npm i react-react-native-component-node-module-templates --save-dev` |
17 | 27 |
|
18 |
| -####Setup on first time run |
| 28 | +#### Setup on first time run |
19 | 29 |
|
20 | 30 | `node node_modules/react-react-native-component-node-module-templates/init.js`
|
21 | 31 |
|
22 | 32 | You will notice this will crate an entry called `gen` in your package.json and copy a folder to your project root called
|
23 | 33 | `developer-templates`. Fell free to edit the as you see needed.
|
24 | 34 |
|
25 |
| -####To run the generator |
| 35 | +#### To run the generator |
26 | 36 |
|
27 | 37 | `npm run gen`
|
28 | 38 |
|
29 | 39 | See [NPM script to automate tasks in React and other JS Projects](https://roshan.digital/npm-script-to-save-time-react-project/) post for more information.
|
30 | 40 |
|
31 | 41 | To Add a new Template
|
32 |
| - 1. Create a folder inside templates folder with the repo type ex:react |
| 42 | + 1. Create a folder inside `developer-templates` folder with the repo type ex:react |
33 | 43 | 2. Create child folder with the template files type ex: component,module
|
34 | 44 | 3. Create user-input-map.json file indicating what are the values user should input and how they should get replaced.
|
35 | 45 |
|
|
0 commit comments