Skip to content

Commit 8f559bc

Browse files
authored
Update README.md
1 parent db8177c commit 8f559bc

File tree

1 file changed

+20
-10
lines changed

1 file changed

+20
-10
lines changed

README.md

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,45 @@
11
# React Component Templates, React Native Component Templates, Express Templates, Node Module Templates and Starters
22

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.
44

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
86

97
- Create and template file type on the code editor.
108
- Use a plugin that gives snippets for the code editor.
119

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+
1323

14-
####Install
24+
#### Install
1525

16-
`npm i react-react-native-component-node-module-templates`
26+
`npm i react-react-native-component-node-module-templates --save-dev`
1727

18-
####Setup on first time run
28+
#### Setup on first time run
1929

2030
`node node_modules/react-react-native-component-node-module-templates/init.js`
2131

2232
You will notice this will crate an entry called `gen` in your package.json and copy a folder to your project root called
2333
`developer-templates`. Fell free to edit the as you see needed.
2434

25-
####To run the generator
35+
#### To run the generator
2636

2737
`npm run gen`
2838

2939
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.
3040

3141
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
3343
2. Create child folder with the template files type ex: component,module
3444
3. Create user-input-map.json file indicating what are the values user should input and how they should get replaced.
3545

0 commit comments

Comments
 (0)