Skip to content

Refactored code according to our needs. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 52 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,8 @@ Generate React Code
This project utilises a scaffolding framework which generates React or React-Native code along with all the essential
test code... Because who likes writing that themselves?!

Additionally, it can be used to generate Redux code conforming to the [Redux ducks pattern](https://github.com/erikras/ducks-modular-redux) - and it can also be used to
generate the Redux core files needed for React-Redux projects (`store`, `root-reducer`, and `action-utilities`).

This generated code conforms to the [Air BnB style guide's](https://github.com/airbnb/javascript) naming and coding-style
conventions, and it is thus highly recommended to make use of this tool when creating new React or React-Redux components.
Additionally, it can be used to generate Redux code and it can also be used to
generate the Redux core files needed for React-Redux projects (`store` and `root-reducer`).

This package also allows users to add a configuration file containing default parameters. That way users would not have to specify these parameters every time they wish to generate code.

Expand All @@ -27,7 +24,7 @@ _IMPORTANT NOTE:_

To install and save this npm package, navigate to your project's root directory in console and execute the following command:
```shell
npm install generate-react-code --save-dev
npm install https://github.com/BoTreeConsultingTeam/Generate-React-Code
```

Then add the following script to your `packages.json` file:
Expand Down Expand Up @@ -56,8 +53,9 @@ npm run gen-react-code -- -n example-component -d src/example/dir -r
| **`-N`** OR<br>**`--native`** | If you wish to generate code for React-Native, add this parameter - else React web code will be generated. | **`false`** |
| **`-r`** OR<br>**`--redux`** | If you wish to generate Redux code in the duck pattern, add this parameter - else regular React code will be generated. | **`false`** |
| **`-o`** OR<br>**`--omit-comments`** | If you wish to hide the comments within the generated files, add this parameter - else descriptive comments will be left in the generated code. | **`false`** |
| **`-R`** OR<br>**`--redux-core`** | If you would like to generate the Redux core files (`store`, `root-reducer`, and `action-utilities`), add this parameter. These files are used to connect your application with Redux. | **`false`** |
| **`-D`** OR<br>**`--redux-core-directory`** | This is the relative directory where the generated Redux core file will be placed (e.g `src/redux`). It is recommended to leave this as the default. | **`src/redux`** |
| **`-R`** OR<br>**`--redux-core`** | If you would like to generate the Redux core files (`store` and `root-reducer`), add this parameter. These files are used to connect your application with Redux. | **`false`** |
| **`-D`** OR<br>**`--redux-core-directory`** | This is the relative directory where the generated Redux core file will be placed (e.g `src/redux-core`). It is recommended to leave this as the default. | **`src/redux-core`** |
| **`-f`** OR<br>**`--functional`** | If you wish to generate a component as a functional component, use this parameter - else it will be class component. | **`false`** |
| **`-h`** OR<br>**`--help`** | Output help usage information. | |

## Configuration File
Expand All @@ -80,7 +78,7 @@ _IMPORTANT NOTE:_

## Generated Output Examples

### React Example
### React Class Component Example

Given the following example code generation command:
```shell
Expand All @@ -103,7 +101,30 @@ functionality and general best practices.
_IMPORTANT NOTE:_
* _Remember to add generated style sheets to the main style sheet, which is usually located in `src/index.scss`_

![Demo](assets/gen-react-code.png)

### React Functional Component Example

Given the following example code generation command:
```shell
npm run gen-react-code -- -n example-component -d src/components -f
```
The following file/folder structure will be generated (_take note that the `example-component` directory is generated without you having to specify it explicitly_):
```
project
└───src
└───components
└───example-component
│ example-component.view.functional.js
│ _example-component.styles.scss
└───test
│ example-component.view.spec.js
```
Within these files the majority of the React code will be completed for you - which contains detailed comments on how to add your
functionality and general best practices.

_IMPORTANT NOTE:_
* _Remember to add generated style sheets to the main style sheet, which is usually located in `src/index.scss`_


### React Example With Config

Expand Down Expand Up @@ -135,9 +156,8 @@ functionality and general best practices.
_IMPORTANT NOTE:_
* _Remember to add generated style sheets to the main style sheet, which is usually located in `src/index.scss`_

![Demo](assets/gen-react-code-config.png)

### React Native Example
### React Native Class Component Example

Given the following example code generation command:
```shell
Expand All @@ -156,7 +176,24 @@ project
Within these files the majority of the React-Native code will be completed for you - which contains detailed comments on how to add your
functionality and general best practices.

![Demo](assets/gen-react-code-native.png)
### React Native Functional Component Example

Given the following example code generation command:
```shell
npm run gen-react-code -- -n example-component -d src/components -N -f
```
The following file/folder structure will be generated (_take note that the `example-component` directory is generated without you having to specify it explicitly_):
```
project
└───src
└───components
└───example-component
│ example-component.view.functional.js
└───test
│ example-component.view.spec.js
```
Within these files the majority of the React-Native code will be completed for you - which contains detailed comments on how to add your
functionality and general best practices.


### React With Redux Example
Expand All @@ -171,6 +208,7 @@ project
└───src
└───components
└───example-component
│ example-component.action.js
│ example-component.container.js
│ example-component.reducer.js
│ example-component.view.js
Expand All @@ -187,7 +225,6 @@ _IMPORTANT NOTE:_
* _Remember to add generated reducers to the root reducer, which is usually located in `src/redux/root-reducer.js`_
* _Remember to add generated style sheets to the main style sheet, which is usually located in `src/index.scss`_

![Demo](assets/gen-react-code-redux.png)

### Redux Core Files Example

Expand All @@ -200,24 +237,14 @@ core files to be generated, irrespective of the other parameters_):
```
project
└───src
└───redux
└───redux-core
│ store.js
│ root-reducer.js
└───action-creator
│ build-action-type.js
│ create-action.js
└───test
│ build-action-type.spec.js
│ create-action.spec.js
```
Within these files the majority of the React-Redux core code will be completed for you - which contains detailed comments on how to add your
reducers and general best practices.

_IMPORTANT NOTE:_
* _Remember to add your `store` to your Redux `Provider` where you're rendering your main app, which is usually located in `src/index.js`_

![Demo](assets/gen-react-code-redux-core.png)


## Extra Material
A great example on how to use `generate-react-code` can be found [here](https://github.com/zulucoda/generate-react-code-test) (courtesy of [ZuluCoda](https://github.com/zulucoda)).
13 changes: 11 additions & 2 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ program
`This is the relative directory where the generated Redux core file will be placed (e.g ${DEFAULT_REDUX_CORE_DIRECTORY}). It is recommended to leave this as the default.`,
DEFAULT_REDUX_CORE_DIRECTORY
)
.option(
'-f, --functional [functional]',
`If you wish to generate a component as a functional component, use this parameter - else it will be class component. `,
false
)
.parse(process.argv);

applyConfig(
Expand All @@ -59,7 +64,8 @@ applyConfig(
redux = false,
omitComments = false,
reduxCore = false,
reduxCoreDirectory
reduxCoreDirectory,
functional = false
}) => {
console.log(
chalk.bold.underline.cyan('Parameters:'),
Expand All @@ -77,6 +83,8 @@ applyConfig(
chalk.yellow(reduxCore),
chalk.bold.magenta('\nreduxCoreDirectory:\t'),
chalk.yellow(reduxCoreDirectory),
chalk.bold.magenta('\nfunctional:\t'),
chalk.yellow(functional),
'\n'
);

Expand All @@ -87,7 +95,8 @@ applyConfig(
redux,
omitComments,
reduxCore,
reduxCoreDirectory
reduxCoreDirectory,
functional
);
}
);
Loading