Template for Create React App supporting TypeScript with Prettier and ESlint config recommended by Airbnb.
Use a new version of React 17 even without new features, now importing
Reactinto JSX files is optional. In addition to making things simpler with automatic injection of the JSX transformer, it also reduces the file size. Read more...
Before
import React from 'react'; // Required
function MyComponent(){
return (
<div>Hello Developers!</div>
);
}Now
function MyComponent(){
return (
<div>Hello Developers!</div>
);
}- Node.js (Node.js >= 8.10 and npm >= 5.6)
Creating a React project using a custom template.
npx create-react-app myapp --template ts-prettier-eslint-airbnbThe CRA Custom Template does not yet have support for devDependencies, so I recommend edit your package.json to like this:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "npm run lint && react-scripts build",
"eject": "react-scripts eject",
"lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
"lint:fix": "npm run lint -- --fix",
"start": "react-scripts start",
"test": "react-scripts test"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"web-vitals": "^2.1.2"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.0.3",
"@types/react": "^17.0.36",
"@types/react-dom": "^17.0.11",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^16.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-import-helpers": "^1.2.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"prettier": "^2.4.1",
"typescript": "4.5.2"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent