I’ve been learning React for a while now, and I’ve always wanted to try the React+TypeScript mode on my projects. However, I have been using VUE for a long time, and now there is a new project coming. I decided to use TS+React to build this project without hesitation.
Main dependencies:
React16.12 +
TypeScript3+
tslint5+
react-router5+
react-redux7+
Axios0.19 +
Element – ui1.4 +
SCSS4.13 +
Environment version requirements:
The Node > = 8.10
NPM > = 5.6
Install the React framework and type library first in two ways:
Method 1:
npx create-react-app my-app –typescript
Method 2:
npx create-react-app my-app –scripts-version=react-scripts-ts
Note: NPX is not a typo — it is the package runtime tool that comes with NPM 5.2+.
Create React App It automatically configures the React development environment. My-app is the name of the project you want to Create.
–scripts-version=react-scripts-ts is a community solution for creating TS projects when the React scaffolding does not support it.
Typescript is now officially supported by scaffolding and can be understood as the official version. There is no discernable difference between the two, but it is generally recommended to use the official version as much as possible.
React has been installed successfully after a while of waiting.
cd my-app
npm start
Ready to run preview!
The current project is working, but there are still some plugins missing compared to our plan above. So let’s start installing them step by step.
The first is tslint
npm i tslint
If the NPM is stuck and will not move, you can change the NPM mapping to Taobao mirror.
npm install -g cnpm –registry=https://registry.npm.taobao.org
If you encounter an error from Windows_NT 10.0.14393 during mapping, it is possible that NPM has been set to proxy. Perform the following sequence to clear proxy Settings:
NPM config set proxy null NPM config delete proxy
npm config set https-proxy null
npm config set strict-ssl false
After the mapping is successful, run the command
cnpm i tslint
The installation was completed in a flash.
Enter after the installation is complete
tslint -i
Json file in the root directory of your project. This is the tsLint configuration file, and it will be based on this
Json file to check our code, the resulting tslint.json file has the following fields:
{
“defaultSeverity”: “error”,
“extends”: [
“tslint:recommended”
].
“jsRules”: {},
“rules”: {},
“rulesDirectory”: []
}
This is the initial tslint.json file generated by TSLint when we initialize it, if you find that your generated file is different from what you see here.
This may be caused by an update to the TSLint version, you can refer to the TSLint configuration instructions to see what they are used for.
DefaultSeverity is the warning level. If it is error it will report an error, if it is warning it will warn, if it is off it will turn off TSLint.
Extends specifies that a specified default configuration rule is inherited.
RulesDirectory can specify rule configuration files, where relative paths are specified.
JsRules is used to configure validation of.js and.jsx files.
Rules is the key, we want TSLint to check the code according to what rules, all configured in this, my project needs to configure several key configuration.
“No-trailing -whitespace”: false,// trailing space check
Be sure to select false, otherwise there should be no Spaces after every line of code, including those generated after a newline.
“one-line”: [
true,
“check-open-brace”,
“check-catch”,
“check-else”,
“check-whitespace”
],// Inline detection
For example, check-whitespace requires a space between the function name, parameter list, and the curly braces at the beginning of the function segment. You can also set it to false to disable this feature completely.
“No-console “: false, // Disable printing
“No-debugger “: false,// Disable debugger
These two items are not easy to debug after they are turned on.
“comment-format”: [
true,
“check-space”
],// Comment the whitespace in the line
If check-space exists, the comment line must start with a space. This doesn’t make much difference to people using English annotations, but it’s not necessary in Chinese. Comments, after all, are different from code snippets, and the format you use should be up to you. You can disable it by removing this item, or by changing the entire commet-format value to false.
“Ordered-imports “: false,// turn off import name ordering
This will require the import names to be sorted alphabetically, which is good news for obsessive-compulsive disorder. But unfortunately I don’t have OCD.
The rules we need for the time being have been configured, and others need to be added during the development process. If you want to see the configuration and details of a rule, refer to the TSLint rule description.
So let’s go ahead and install
Axios:
npm i axios
Story:
npm i redux
npm i redux-devtools
SCSS:
npm i sass-loader node-sass –save-dev
Element:
npm i element-react
npm i element-theme-default
Install element-React with NPM. It is easy to get stuck there and not move. CNPM is recommended.
Can’t resolve ‘react-hot-loader’ error when you run Element for the first time. Install the react-hot-loader version
npm install react-hot-loader@next
PS: There may be some questions here, why not install WebPack? The Create React App Scaffolding differs from other scaffolds in that it encapsulates the configuration of complex tools (such as Webpack) so that users don’t have to worry about the configuration of these tools, making it easier to use.
But what about developers who are familiar with WebPack and want to make some changes to their WebPack configuration?
You can actually modify the webPack configuration through project eject.
After creating the project using the Create React App, the project provides this command in package.json:
{
.
“scripts”: {
“eject”: “react-scripts eject”
},
.
}
NPM run eject Decompiles all the configuration encapsulated in the Create React App project into the current project, so that the user can take full control of the Webpack file and modify it however they want.
The config folder that contains the WebPack configuration appears in the project root directory after # eject
config
├ ─ ─ env. Js
├ ─ ─ jest
│ ├ ─ ─ cssTransform. Js
│ └ ─ ─ fileTransform. Js
├ ─ ─ paths. Js
├ ─ ─ polyfills. Js
├─ Webpack.config.dev.js // Development Environment Configuration
├─ Webpack.config.prod.js // Production Environment Configuration
└ ─ ─ webpackDevServer. Config. Js
Another way the Create React App differs from other scaffolders is that CRA features can be updated by upgrading the React-Scripts package. For example, if you Create a project using an older version of the Create React App, this project does not have PWA functionality, but if you upgrade the react-Scripts package, you can have PWA functionality. The project code does not need to be modified.
However, if you use eject, you no longer get the benefits of the Create React App upgrade because React-Scripts already exist in your project as a file, not as a package, so you cannot update it.
At this point, the basic functionality of the project is in place, but there are still some separate configuration and encapsulation calls that need to be addressed in the next article.