React CLI Tool A CLI tool for one-key setup TypeScript, React, Webpack.
Feature Includes:
- Create a complete customizable React Project with just a key.
- Support TypeScript, Scss.
- Save time configuring webpack settings.
- Easy to change
webpack.config.js
when needed. - Currently freezed to webpack 4
- Path Alias support
- Easy Command to generate component and module
The easiest way to use jamyth-script
yarn global add jamyth-script
After that, type the following to the console.
jamyth-script new my_awesome_project
Then the cli will automatically generate all the files needed.
File Structure will look like this
* my_awesome_project
|
+-- node_modules
+-- src
| +-- asset
| +-- component
| +-- module
| | +-- main
| | +-- component
| | | +-- Main.tsx
| | | +-- index.scss
| | +-- index.ts
| +-- util
| | +-- async.tsx
| +-- index.tsx
|
+-- static
| +-- index.html
|
+-- package.json
+-- tsconfig.json
+-- webpack.config.js
+-- yarn.lock
In src folder, there will be two folder called component and module. To keep the structure organized. we do not suggest directly added folder and file.
Instead, we suggest you to do the following
// First cd to your project directory, or the follow commands cannot
// execute properly.
jamyth-script g module home --state|-s --asset|-a
// --asset -> will generate an asset folder in the module
// --state -> will generate a type.ts for the interface and more
================================================
jamyth-script g component logo --asset|-a
// --asset -> will generate an asset folder in the component
when the installation complete, simply cd the project folder and
yarn start
To keep your webapp optimized, we provided a dynamic import solution for code splitting. You can apply this feature in two ways.
This functionality is inspired by
React.lazy
. But we also supportNamed Export
as well asDefault Export
.
- Route Component -> Split by Page
- Module / Component -> Split whenever calling another module or component
// Logo.tsx
export const MyLogo = React.memo(() => <img src={mylogo}/>)
// Module.tsx
import { async } from 'util/async'
const myLogo = async(() => import('component/logo'), 'MyLogo')
export const Module = React.memo(() => {
return (
<main>
<myLogo />
</main>
)
})
#Commands
Command | Description | Param Required |
---|---|---|
new <project_name> | Generate a React Project | Yes |
g <module|component> < name > | Create module or component | Yes |
#Todos
- npm support
- react-router
- redux
path alias-> v1.2.23React.memo-> v1.2.23Code Splitting-> v1.3.0- non-typescript
- and more ...
#Licenses MIT licensed. Copyright (c) Jamyth Luk 2020.