ReactとTypeスクリプト設定(CRAなし)-1(React/Typscript設定)
11195 ワード
React/Typescriptの設定
Reactプロジェクトを作成する場合は、npmが提供するcreate-act-app(CRA)を使用して簡単に作成できます.ただし、CRAの助けなしにwebpack、babelなどを直接使用してプロジェクトを作成したいと考えています.
(私は好きなようにプロジェクト設定をカスタマイズし、webpack&babelなどのフロントエンド初期設定を熟知したい)
1.プロジェクトの作成
npmでプロジェクトを初期化します.(name、authorなどの設定)
$ npm init
初期化後にパッケージングします.プロジェクトの情報とインストールされたライブラリ(依存項目)を含むjsonファイルを生成します.
2.React&Type scriptのインストールと設定
1)反応パックの取り付け
$ npm install react react-dom react-router-dom
2)インストールタイプスクリプトパッケージ
$ npm install -D typescript
3)インストールタイプ定義ライブラリ(@types/[ライブラリ]形式でインストール)
$ npm install -D @types/react @types/react-dom @types/react-router-dom
4)styled-conentsライブラリをインストールする(styled-conentsを使用する場合)
npm install styled-components styled-reset
npm install -D @types/styled-components
5)次のコマンドtsconfigを使用します.jsonファイルを生成して内容を変更します.
$ npx tsc --init
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es2015", "dom", "dom.iterable"],
"strict": true,
"noImplicitAny": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"declaration": true,
"isolatedModules": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmit": true
}
}
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));// App.tsx
import React from "react";
function App(): JSX.Element {
return (
<>
<h1>App</h1>
</>
);
}
export default App;次の記事ではWebpackとbabelを設定してみます.
(Move to Github Repository)
Reference
この問題について(ReactとTypeスクリプト設定(CRAなし)-1(React/Typscript設定)), 我々は、より多くの情報をここで見つけました https://velog.io/@greatasher7/React-Typescript-Setup-without-CRA-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol