Awesome
<span>+</span> <img src="https://github.com/remojansen/logo.ts/raw/master/ts.png" width="70" height="70" />
@jpavon/react-scripts-ts
Modern build setup with no configuration for React + TypeScript projects.
Main differences with create react app:
- Faster build times
- Namespaces support
- Module resolution support (baseUrl/paths)
- Type checking on a separate proccess
- Transpilation using ts-loader
- Provide compile-time information for styled components typescript-plugin-styled-components
Found any problem or bug? Please create a new issue.
Features
- Webpack 4
- TypeScript compilation ts-loader
- Type and tslint errors on a separate process fork-ts-checker-webpack-plugin
- Sass, Less and Css Modules css-modules
- Generate TypeScript typings for CSS modules typings-for-css-modules-loader
- Tranform SVG into React components svgr
- Use
.js|.jsx
and.ts|.tsx
files together.
Check out the template files for usage examples.
Getting started
Create a new project:
npx create-react-app my-app --scripts-version=@jpavon/react-scripts-ts
cd my-app/
yarn start
(npx comes with npm 5.2+ and higher)
Already using create-react-app / react-scripts?
Install this package in yout project:
yarn add @jpavon/react-scripts-ts
Change your package.json configuration to use react-scripts-ts
{
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
}
}
Ejecting
Ejecting is not supported in this project, you have 2 options:
-
Fork this project and create your own react-scripts-ts package.
-
Use react-app-rewired with custom scripts versions:
{
"scripts": {
"start": "react-app-rewired start --scripts-version @jpavon/react-scripts-ts",
"build": "react-app-rewired build --scripts-version @jpavon/react-scripts-ts",
"test": "react-app-rewired test --scripts-version @jpavon/react-scripts-ts --env=jsdom"
}
}