TypeScript、React、Redux、Ant-Designのベストプラクティス
7663 ワード
アトウッドの法則は
新技術を使用する場合は、一歩一歩ではいけません.よく知らない2つの新技術を組み合わせて使用しようとすると、地面に押されて摩擦する可能性が高いです.
使用中 を解決するのに多くの時間がかかる可能性があります.フロントエンドの性能の最適化の不完全なマニュアル、これは本人の1篇の文章で、同じく見るべきです.ハハハ~
( 技術を学ぶには焦りすぎてはいけない.一歩一歩天に登って、何でも学びたいのに何もできない.作者の心得は、根気よく努力して、すべての技術を一つ一つ破壊して、最後に結合して使用して、魚が水を得るように、
正式にオープン:本文はどのように配置するかを紹介して、すでに全体の業務の流れはどのようにGitHubソースコードのアドレスを構築します パッケージマネージャは、 公式の を使用 をグローバルにダウンロードしなければならないことです.
サードパーティ製のプロジェクトであり、Create React Appの一部ではないことに注意してください.に必要な依存:
配置が理解していないで大丈夫で、棚は私はすべてあなたに組み立てて、押しています私たちは理理的な考え方に重点を置いています.まず、なぜ は を終了することをお勧めします. 大型プロジェクトの第一選択
書き込み複雑なソフトウェアは複雑な設計を必要とし、オブジェクト向けは良い設計方式であり、
any application that can be written in JavaScript, will eventually be written in JavaScript、すなわち「任意の使用可能JavaScriptで書かれたアプリケーションは、最終的にはJavaScriptで書きます」新技術を使用する場合は、一歩一歩ではいけません.よく知らない2つの新技術を組み合わせて使用しようとすると、地面に押されて摩擦する可能性が高いです.
yarn/npmとReactの足場などの技術が前提です.後でPWA とNode.jsのクラスタ負荷均衡Nginxを書き続けます.webpack原理解析等~ありがとう 私の前の文章の ~使用中
TypeScript前、どうぞ 次の内容を学習してから試してください.TypeScript必須知識点:javaScript、特にチェン一峰のES 6チュートリアルは何度も見なければなりません.よく見てください.そうしないと、TSに押されて地面を摩擦します.TypeScriptドキュメント、TypeScriptとは何か、よく見てください.開発時の小さな問題は、あなたができない知識点である可能性があります.そうすると、 ， ~ React直接ドキュメントを見て、React公式中国語ドキュメント、Reactの中国語ドキュメントはもうとてもよく書けていると思います.勉強するのは簡単です.Redux、Reduxを学ぶ前に、公式ドキュメントを何回か読むことをお勧めします.それからprops context pubsub-jsこれらのコンポーネントがデータを伝える方法はよく知ってからReduxに行きます.Reduxの書き方は非常に固定されているので、TSでは修飾器を使用できないだけで、最も原始的な書き方が必要です.後ろのコードに注釈があります.その時に見てもいいです.Redux公式文書HOOKSとHOCはいずれも使用を試みることができるが、Reactの将来的にはこれらの書き方を使用する可能性があるため)Ant-Design、現在React生態の最も良いUIコンポーネントライブラリ、90パーセントの使用率、モバイル端末、PC端末はすべて支持して、proはまた箱を開けてすぐ使うことができて、強く推薦して、配置を開けて必要に応じてロードして、バックグラウンドTO-Bプロジェクトはあまり快適ではありません.Ant-Design公式サイト~ ， 、本明細書のコードはすべての構成とRedux , Ant-Designはすべて配合して、箱を開けてすぐ使って、その他の機能はあなたが見ますAnt-Designの文書を中に入れればいいです.正式にオープン:
yarnまたはnpmを使用することができます.ここではyarnを使用することをお勧めします.Ant-Designは、yarnが公式に推奨されているため、自動的に依存を追加します.create-react-appの別のバージョンを使用してCreate React AppとともにType Script react-scripts-tsは、 create-react-appプロジェクトサポートTypeScriptを自動的に構成します.このように使用できます:create-react-app my-app --scripts-version=react-scripts-ts、-前提はあなたがcreate-react-app サードパーティ製のプロジェクトであり、Create React Appの一部ではないことに注意してください.
package.jsonファイルにあります. ，TS ， ， @types/ {
"name": "antd-demo-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "24.0.11",
"@types/node": "11.13.7",
"@types/react": "16.8.14",
"@types/react-dom": "16.8.4",
"@types/react-redux": "^7.0.8",
"@types/react-router-dom": "^4.3.2",
"@types/redux-thunk": "^2.1.0",
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.12",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"redux-chunk": "^1.0.11",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"typescript": "3.4.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
} * `Ant-Design` `config-overrides.js`const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
})
);
```tsconfig.json、TSのプロファイルはほとんど変更されていません {
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src"
]
}Redux less 配置が理解していないで大丈夫で、棚は私はすべてあなたに組み立てて、押しています
TSおよびAnt-Designの公式サイトは操作しますOK TypeScriptを使うのですか.TypeScriptを使用して最終的にJSにコンパイルされるので、JSのスーパーセットと呼ばれています.TypeScript静的タイプチェック付きで、現在のサードパーティ製パッケージは基本的にソースコードがTSで、デバッグを表示するのに便利です.TSを使用した後、私はBUGをデバッグする能力が強くなったと感じました.そして、間違いは少なく、思考がもっと厳格になりました.結局、これは導入順序が間違っていても間違いを報告する言語です.TSを使用している間にany public を使用していた場合は、TS TSに乗ると、修飾器が使えないなど、すべてが異なります.ReactとTSを結合し、コードデバッグとメンテナンスが極めて便利である.Reactはどのように最適化されますか?私の最初の文章はリンクがあります~Ant-Designこんなに怒っているのに、どうやって勉強すればいいですか.ラベルプロパティのメソッド付きコンポーネントライブラリで、すべてがドキュメントに隠されています.ReactのReduxは、VUEXと同様に、一方向のデータストリームであり、書き方が固定されており、書くのが非常に容易~難しいのはAPIではなく、全体の技術アーキテクチャであり、実現原理を把握している.書き込み
TSコードはよく自分に聞いて、これはいったいどんなタイプなのか、これはいったいpublic private?この関数は、どのようなタイプを返すか、どのようなパラメータを受け入れるか、何が必要なのか、何がない可能性があるのか、ネーミングスペースインタフェースのマージ、クラスのマージ、継承などの問題を考慮します. TSを使用する大きなメリットは TS が業界で認可されたクラス(ES5+ もサポート)、汎用、パッケージ、インタフェースのオブジェクト向け設計能力を提供し、JSのオブジェクト向け設計能力を向上させることである.TS世界を泳いだ後、JSの世界に戻ると、ビジネスロジックの問題でない限り、コードを書くのは間違いが少ないことがわかります.