All Projects → nonoroazoro → typescript-react-boilerplate

nonoroazoro / typescript-react-boilerplate

Licence: MIT license
👻 Minimal example for React with TypeScript.

Programming Languages

typescript
32286 projects
Less
1899 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to typescript-react-boilerplate

Mobx React Lite
Lightweight React bindings for MobX based on React 16.8 and Hooks
Stars: ✭ 2,096 (+12229.41%)
Mutual labels:  react-hooks
use-google-sheets
📝 A React Hook for getting data from Google Sheets API v4
Stars: ✭ 75 (+341.18%)
Mutual labels:  react-hooks
fetchye
✨ If you know how to use Fetch, you know how to use Fetchye [fetch-yae]. Simple React Hooks, Centralized Cache, Infinitely Extensible.
Stars: ✭ 36 (+111.76%)
Mutual labels:  react-hooks
Fre
👻 Tiny Footprint Concurrent UI library for Fiber.
Stars: ✭ 3,195 (+18694.12%)
Mutual labels:  react-hooks
react-7h-hooks
(持续增加中)提供一些偏业务的实用 react hooks, 让你每天只工作 7 小时 !
Stars: ✭ 15 (-11.76%)
Mutual labels:  react-hooks
react-immer-hooks
Easy immutability in React Hooks with Immer.
Stars: ✭ 45 (+164.71%)
Mutual labels:  react-hooks
Use Http
🐶 React hook for making isomorphic http requests
Stars: ✭ 2,066 (+12052.94%)
Mutual labels:  react-hooks
react-stripe-script-loader
A React Component that loads Stripe script if necessary and shows React Stripe Elements
Stars: ✭ 22 (+29.41%)
Mutual labels:  react-hooks
use-axios-react
React axios hooks for CRUD
Stars: ✭ 31 (+82.35%)
Mutual labels:  react-hooks
use-double-click
React hook for combining double-click function into click event, as well as repeatable double-click
Stars: ✭ 17 (+0%)
Mutual labels:  react-hooks
Project chat application
This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a real time chat application. Covered topics: React.js, Node.js, Express.js, and Socket.io.
Stars: ✭ 2,966 (+17347.06%)
Mutual labels:  react-hooks
react-hooks-lifecycle
⚛️ 🪝 ⏳ React hooks lifecycle diagram: Functional components lifecycle explained
Stars: ✭ 194 (+1041.18%)
Mutual labels:  react-hooks
react-use-countdown
React hook for countdown state.
Stars: ✭ 19 (+11.76%)
Mutual labels:  react-hooks
React Form
⚛️ Hooks for managing form state and validation in React
Stars: ✭ 2,270 (+13252.94%)
Mutual labels:  react-hooks
eslint-config-ns
ESLint config ready to be used in multiple projects. Based on Airbnb's code style with prettier, jest and react support.
Stars: ✭ 27 (+58.82%)
Mutual labels:  react-hooks
Haunted
React's Hooks API implemented for web components 👻
Stars: ✭ 2,197 (+12823.53%)
Mutual labels:  react-hooks
use-route-as-state
Use React Router route and query string as component state
Stars: ✭ 37 (+117.65%)
Mutual labels:  react-hooks
use-navigator-online
⚛️ React Hooks to detect when your browser is online/offline.
Stars: ✭ 23 (+35.29%)
Mutual labels:  react-hooks
react-native-scrollable-animated-header
🤯 React Native Animated Header with ScrollView
Stars: ✭ 112 (+558.82%)
Mutual labels:  react-hooks
react-facade
Experimental dependency injection for React hooks
Stars: ✭ 95 (+458.82%)
Mutual labels:  react-hooks

typescript-react-boilerplate

Just clone and rename to create your own React app

GitHub License

Based on

  • typescript
  • react v18 (with hooks)
  • react-router
  • react-hot-loader
  • css-modules
  • webpack

Testing

  • jest
  • @testing-library

Linter

Something you should know

  1. In transpileOnly mode of ts-loader, the Typescript compiler will not generate declaration files, but you can generate them via tsc.

  2. When using CSS Modules:

    1. You should add a declaration file for e.g. *.less files, for example, less.d.ts.

    2. To make the Iconfont work properly with CSS Modules, you have to import the styles in the global scope:

      :global
      {
          @import "~font-awesome/less/font-awesome.less";
      }
  3. While using react-router, you should use withRouter() as a function call instead of as a decorator (@withRouter), because TypeScript doesn't allow decorators to change the signature of the classes they are decorating.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].