スタイル設定
7.npm i sass sass-loader style-loader css-loader -D
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
sourceMap: true //スタイルを開いて見つけるかどうか
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader', // スタイルファイルを解析する
options: {
sourceMap: true
}
}
]
}
7.srcインデックスを追加する.scss
$color: red;
.wrap{
background: $color;
height: 1000px;
width: 100px;
}
7.3 App.jsx
import './index.scss'
クラスを追加する <div className='wrap'>Hello World</div>
ok!!! スタイルも良い
実際には、この時点で開発を開始することができ、開発環境は構成され、ライン上でパッケージングを構成しますが、コンポーネントを記述し、少し完了し、Typescriptを使用します！
Typescript、Typescript への変更
8.npm i ts-loader typescript -D
8.を以下のディレクトリに追加して、tsconfigを追加する。.json 内容を最初に記入する
tsconfig.jsonはTsのコンフィギュレーションである
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"strictNullChecks": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"includes": [
"./src/",
]
}
8.webpack を変更する.dev.config.js マッチする js ルールは以下の通りである。
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: "ts-loader",
options: {
// transpileOnly: true
}
}
}
8.コマンドを再起動すると、エラー
TS7016: Could not find a declaration file for module 'react'
TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
React と React-DOM とその宣言ファイルもパッケージに追加する必要があるからだ。.jsonファイルをベースとする
8. npm i @types/react @types/react-dom -D
この時点で、アプリの使用、変更を開始することができる。.tsx
import React, { Component } from 'react'
import './index.scss'
type State = {
name: string;
age: number
}
type Props = {
}
export default class App extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
name: 'React',
age: 6
}
}
render() {
return (
<div className='wrap'>Hello World</div>
)
}
}
またはフックモードを使用する
import React, { useState } from 'react'
import './index.scss'
type Props = {
text: string
age?: number
}
const App = (props: Props) => {
const [name, setName] = useState<string>('');
const { text } = props
const a = () => {
}
return (
<div className='wrap' onClick={a}>Hello World</div>
)
}
export default App
や若干の欠陥があっても、特に無理矢理感はなく、徐々に最適化されていく！
eslint の設定を追加
コード指定 how can less eslint
9.npm install eslint -D
9.ルートディレクトリを追加する.eslintrc.js
最初にコンテンツを追加する
module.exports =
{
'rules': {
'quotes': [2, 'single'],
'space-infix-ops': ['error', {'int32Hint': false}],
'indent': ['error', 2],
'key-spacing': ['error', { 'beforeColon': false }],
'lines-between-class-members': ['error', 'always'],
'no-redeclare': 'error',
'comma-spacing': ['error', { 'before': false, 'after': true }],
'no-unneeded-ternary': 'error'
}
}
この時、コードが情報のフォーマットをプロンプトしないことがわかったが、これはここで使用されているためであるts,
9. npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react -D
Reactの新機能Hooksを使うため,
@typescript-eslint/parser: eslint が認識できるように、TypeScript を ESTree に変換する。
@typescript-eslint/eslint-plugin: 開閉可能なルールのリストだけである
.eslintrc.js 以下を修正し、実際の状況に応じてルールを記入する。
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended',
],
plugins: ['@typescript-eslint', 'react'],
rules: {
quotes: [2, 'single'],
'react/jsx-uses-react': 2
},
};
