Light

alexey-koran / react-template Goto Github PK

View Code? Open in Web Editor NEW

33.0 3.0 34.0 2.31 MB

Up-to date react + typescript template

License: MIT License

JavaScript 72.95% TypeScript 23.87% HTML 2.88% CSS 0.30%

create-react-app create-react-app-typescript react react-boilerplate react-template

react-template's Introduction

React template

AS A PACKAGE MANAGER, I HIGHLY RECOMMEND USING PNPM

AS A NODE.JS VERSION MANAGER, I HIGHLY RECOMMEND USING NVM

Installation

git clone repo_url
cd project_location
pnpm i

Scripts

Start developer mode (support hot reload)

pnpm dev

Start production mode (with some build optimizations)

pnpm prod

Dev & prod scripts use the 8080 port

http://localhost:8080/

Clean build folder

pnpm clean

Build application for deploy

pnpm buildapp

Clean build folder & rebuild application for deploy

pnpm build

Start webpack plugin for bundle analyze

pnpm analyze

Husky utility script, starts only once, at the packages installation (not need to be manually called anytime)

pnpm prepare

Start formatter check on all files

pnpm prettier

Start formatter autofix on all files

pnpm prettier:fix

Start ESLint check on all files

pnpm lint

Start ESLint autofix on all files

pnpm lint:fix

Start ESLint autofix only on git staged files

pnpm lint:fix-staged

Start stylelint check on all files

pnpm lint:css

Start stylelint autofix on all files

pnpm lint:css:fix

Start stylelint autofix only on git staged files

pnpm lint:css:fix-staged

Start ESLint config inspector

pnpm test:eslint-config

Start Webpack config test

pnpm test:webpack-config

Start prettier, ESLint & stylelint check processes in order

pnpm lint-all

Start prettier, ESLint & stylelint autofix processes in order

pnpm fix-all

Start lint-staged fix scripts from .lintstagedrc on git staged files (husky automatically call it on git pre-commit hook)

pnpm fix-staged

Start svgo on passed svg file (size optimization)

pnpm svgo $FILE_PATH

Start svgo on all svg files in the project (size optimization)

pnpm svgo-all

Known issues:

Temporary disabled postcss stylelint (still buggy)

Unstable packages (rc, beta & etc.):

Unmet peer [email protected] for ESLint plugins (wait ESLint v9 support releases):

Use fixupPluginRules from @eslint/compat to fix eslint-plugin-import plugin rules

Archived postcss-assets plugin

react-template's People

Contributors

Stargazers

Watchers

react-template's Issues

Write docs for simple-scss-js boilerplate

Source map console warnings

https://github.com/alexey-koren/bundlers-boilerplates/blob/95332b2ec6ea9f09c85c7563c7c35865cef63ff5/webpack.config.ts#L43
devtool: isProduction ? 'source-map' : 'eval-source-map' helps to avoid chrome console warnings
https://stackoverflow.com/questions/61767538/devtools-failed-to-load-sourcemap-for-webpack-node-modules-js-map-http-e

ESLint rule 'no-param-reassign' and Redux Toolkit

ESLInt warns about reassigning state in createSlice()

const langSlice = createSlice({
  name: 'language',
  initialState,
  reducers: {
    setLanguage (state, action) {
      state.currentLang = action.payload;   // Error!
    },
  },
});

Suggestion: add rule as mentioned in RTK docs
https://redux-toolkit.js.org/usage/immer-reducers#linting-state-mutations

{
  'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['state'] }]
}

Move the react-table example to a separate branch

Regenerator runtime problem

Should add new plugin

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

`.babelrc`

{
  ...
  "plugins": [
    ...
    ["@babel/plugin-transform-runtime"]
  ],
  "sourceType": "unambiguous"
}

https://babeljs.io/docs/en/babel-plugin-transform-runtime#regenerator

[You'll want to set the sourceType option to either "unambiguous" or "script" if your files aren't ES modules. The docs for the option explain, but essentially because the type is wrong, it will insert import statements into your CommonJS file, causing the error you're seeing.](babel/babel#8900.)

ESlint fragments

https://github.com/alexey-koren/bundlers-boilerplates/blob/95332b2ec6ea9f09c85c7563c7c35865cef63ff5/.eslintrc#L186
Maybe this is better "react/jsx-fragments" : ["error", "syntax"]
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md

Update react-typescript boilerplate

Update packages
Update configs
Test boilerplate

Write docs

Sections:

Write docs

Sections:
Installation
Quick start
Packages & their settings, purpose
Strongly recommended VSCode plugins
Examples

Loader configuration for '@svgr/webpack' references no longer existing Prettier config

Please check: https://github.com/alexey-koran/react-template/blob/main/webpack.config.ts#L120

.prettierrc was renamed to prettier.config.cjs in 08e74bf

Static files unreachable during develop

https://github.com/alexey-koren/bundlers-boilerplates/blob/95332b2ec6ea9f09c85c7563c7c35865cef63ff5/webpack.config.ts#L108
It seems you should fix "static" to "src/static"

Is it duplication?

https://github.com/alexey-koren/bundlers-boilerplates/blob/95332b2ec6ea9f09c85c7563c7c35865cef63ff5/webpack.config.ts#L52-L61

Update examples

Add usage examples:

Update simple-scss-js boilerplate

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.