react-typescript-webpack

React-Typescript-Webpack was config with React, Typescript and Webpack without CRA. Faster to start your next react project.

Quick Start

For Development:

Clone this repo to your local machine using:

git clone git@github.com:thaind97git/react-typescript-webpack.git

Change the current working directory to the project:
```
cd react-typescript-webpack
```
Install dependencies:
```
[ yarn or npm install ]
```
At this point you can run npm run dev or yarn dev to run project with development mode

Now, your browser will auto open at http://127.0.0.1:3000

For Production:

Run command to build:
```
[ yarn or npm run ] build
```
Setup env for production mode by create new file .env.production
Run project at build directory
- Using pm2: [ yarn or npm run ] start-pm2
- Run with terminal: [ yarn or npm run ] start

Features

[x] React hook
[x] Webpack 5
[x] Typescript
[x] Sass
[x] Redux-thunk
[ ] Redux-saga
[x] Jest
[x] Axios
[x] I18n
[x] React-router
[x] Alias
[x] Hot reload
[x] Eslint
[x] Prettier and Husky

How to using

Router:

Create new feature at src/features/<feature-name/>

Create a route.ts inside src/features/<feature-name/> and export default an array match with rules:

import { lazy } from 'react';
const Component = lazy(() => import('./path-to-component'));

export default [
  {
    /*
     * name of a route
     * using to apply key react when generate routes
     * required for declare
     */
    name: 'name',
    /*
     * path of route
     */
    path: '/path-name',
    /*
     * using as exact in react-router
     */
    exact: true,
    /*
     * dynamic render layout for each route
     * header: false -> route will auto hide header
     * if this rendered, don't need to declare
     * control this inside `src/store/slices/layoutSlice` with more section
     */
    layout: {
      header: false,
      footer: false,
    },
    /*
     * component rendered inside route
     */
    component: Component,
  },
];

- You don't need do anything else after create and modify route.ts because i'm using import-glob to auto import (check at webpack/webpack.common.js for plugin, src/router/index.ts and src/layouts/main/index.tsx for using).

- If you don't want to use auto import or using project with jest, just using the code that i'm commented. Because i'm not yet support auto import for jest.

Write new component
- Create new folder at src/components/<component-name/>
- Create an index.tsx and <any-name>.scss
  
  - Don't need import scss into component, It will already merged into App.scss after you restart server.
  
  - This is a feature by using import-glob (check at webpack/webpack.common.js for plugin and src/styles/App.scss for using)
  
  - You should use BEM to write css without conflict

Using i18n

Create new json file at src/locales/resources/<file-name/>.json

Add content follow this format into json file

{
  "en": {
    "name": "Name"
  },
  "vi": {
    "name": "Tên"
  }
}

update src/locales/resources/index.ts like this:

/*
 * you can use other name instead `user`
 * this name will be used as path to key
*/
import user from './<file-name/>.json

const mergeResource: IResource = {
  ..., // others json
  user
};

Now inside any where, you can access to key like this:

  const { t } = useTranslation()

  t('user.name') will be render "Name" for `en` and "Tên" for `vi`

Tips

Go to .huskyinstall, remove comment at line 37 and run [yarn or npm install] again to apply run test when using git push origin [ branch ]
Go to config/@types/[any-file-name].d.ts to declare global type of typescript
Go to pm2/prod.json and change "name: ~~react-webpack-typescript-starter~~ ->[other-name]" to config pm2 app name
Go to components/spinner/index.tsx and modify jsx + css to use another loading

Carefully

Don't create folder with the PascalCase. Because it will throw error when build prod at ubuntu. I will fix it later or happy if you have a PR to fix it.
```
Module not found: Error: Can't resolve '@/path-to-pascal-case' in '/path-to-lower-case'
```

GitHub

https://github.com/thaind97git/react-typescript-webpack