を作成せずに反応アプリを作成します

私はJSを使用してスクラッチからの反応アプリを作成するには、私は肯定的な応答とTypesScriptのポストを作る上で多くのコメントを得たので、私は同じリフレッシュを使用してTypesScriptを使用して同じタスクを行うことを決めた.この動画はお気に入りから削除されています.
基本的な反応アプリを作成する最も簡単な方法は、NPXの作成反応アプリ私のアプリを実行することです-テンプレートTypesScriptとブームあなたの基本的な反応アプリが作成されますが、あなたは今まで私は自分の全体のプロセスを行うことができます不思議に思ったことがありますか?はいはい、できます.
前提条件:ノードJSとVSのコード.それはあなたが必要なすべてです.
レッツゴー..

1 . VSコード端末を開き、以下のコマンドを実行します。

npm init -y

このコマンドパッケージを実行します.JSONは、NPMに公開する前に必要な重要な情報を保持し、NPMが依存関係をインストールし、スクリプトを実行し、プロジェクトのエントリポイントを特定するプロジェクトの属性を定義します.

npm install react react-dom 

反応DOMが反応とブラウザーDOMの間の接着剤である間、反応はユーザーインターフェースをつくるのに必要です.
このコマンドを実行した後、nodeoundモジュールとパッケージ.ロック.JSONが作成されます.ノードモジュールはNPMからダウンロードされたすべての依存関係を保持します.パッケージ.ロック.JSONはすべてのパッケージの正確なバージョンをインストールし、すべてのパッケージの依存木を追跡します.

npm install --save-dev typescript @types/react @types/react-dom 

typescriptのサポートを得るために、上記のコマンドは型とともに使用されます.

npm install --save-dev @babel/core @babel/preset-env  @babel/preset-react @babel/preset-typescript babel-loader

Babelは以前のブラウザと環境でサポートできるバニラJSコードに最新のJSコードを変換するJSコンパイラです.バベルローダーは、BabelとWebpackを使用してファイルを転送します.バベルのプリセットは、あなたのJSファイルを生成するために使用され、既存のビルドパイプラインで動作するように能力を得る.
更なる読書訪問https://babeljs.io/docs/en/

2 .ファイルを作成します。以下のコードをコピーします

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/preset-typescript"
    ] 
}

このファイルは、Babel用の設定ファイルであり、プリセットはBabelプラグインおよび/またはconfigオプションの共有セットとして動作します.

3 . configファイルを作ります。JSONと下のコードをコピーする

{
    "compilerOptions": {
        "target": "ES5" ,
        "module": "ESNext" ,
        "moduleResolution": "node" ,
        "lib": [
            "DOM",
            "ESNext"
        ] ,
        "jsx": "react-jsx" ,
        "noEmit": true ,
        "isolatedModules": true ,
        "esModuleInterop": true ,
        "strict": true ,
        "skipLibCheck": true ,
        "forceConsistentCasingInFileNames": true ,
        "resolveJsonModule": true
    },
    "include": [
        "src/**/*"
    ]
}

このファイルはtypescriptの設定ファイルです.tsconfigの存在.ディレクトリ内のJSONファイルは、ディレクトリがTypeScriptプロジェクトのルートであることを示します.tsconfigJSON fileプロジェクトをコンパイルするために必要なルートファイルとコンパイラオプションを指定します.

npm install --save-dev webpack webpack-cli @pmmmwh/react-refresh-webpack-plugin react-refresh

Webpackは、モジュールバンドルとしても知られているJavaScriptモジュールをコンパイルできるツールです.ファイルの多数を与えられた場合、それはあなたのアプリケーションを実行する単一のファイル(またはいくつかのファイル)を生成します.Webpack CLIは、設定ファイルのWebpackを使用します.反応リフレッシュWebpackプラグインと反応リフレッシュは、状態保持特性で速いリフレッシュに役立ちます.

npm install --save-dev html-webpack-plugin style-loader css-loader file-loader

これらのすべてのウェブパックと一緒に様々なファイルの束に役立つローダです.

4 .ファイルパックを作成します。設定。以下のコードを

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

const isDevelopment = process.env.NODE_ENV !== "production";

module.exports = {
  mode: isDevelopment ? "development" : "production",
  entry: "./src/index.tsx",
  devServer: {
    hot: true,
  },
  target: "web",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    isDevelopment && new webpack.HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.ts$|tsx/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
        options: {
          plugins: [
            isDevelopment && require.resolve("react-refresh/babel"),
          ].filter(Boolean),
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      },
    ],
  },
};

この設定ファイルは、エントリポイント、バンドル出力ファイル名、パス、プラグイン、さまざまなローダを使用して、さまざまな種類のファイルをバンドルして解決するために使用されます.
更なる読書訪問のために:https://webpack.js.org/concepts/

フォルダ" src "を作成し、その中に" app . tsx "ファイルを作ります

import React from "react";
import  Counter  from "./Counter";
 const App=()=>{
    return (
    <div>
    <h1>Create React App from Scratch Using Typescript..!!</h1>
    <Counter/>
    </div>
    )
}
export default App;

これは、カウンターコンポーネントと一緒にH 1のタグの内側にラップされたTypesScriptを使用してゼロから作成反応アプリを返す基本的な矢印の関数です.

" src "フォルダの中に別のファイル" counter . tsx "を作成します。

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h3>Update the count and edit src/App.tsx, state is preserved</h3>
      <button onClick={() => setCount((c) => c + 1)}>Count - {count}</button>
    </div>
  )
}

export default Counter;

このコンポーネントは、すべてのクリックで増加して増加する基本的なボタンを返します.このコンポーネントは、カウンタの現在の値を格納するために反応フック“USENT”を使用します.

7 .コードのエントリポイントとなるファイル" index . tsx "を作成します。

import React from "react";
import ReactDOM from "react-dom";
import  App  from "./App";

ReactDOM.render(<App/>,document.querySelector("#root"))

もう一つのファイル" index . 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 with Typescript </title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

私たちの設定で、それが読むべきであると指定しましたsrc/indexHTMLテンプレートです.また、INFOオプションをtrueに設定しました.そのオプションを使用すると、HTML Webpackプラグインは、最終的なHTMLページにWebPack右によって提供されたパスでスクリプトタグを追加します.この最終的なページは、あなたがdist/index .NPMの実行ビルドを実行した後のHTML、NPM起動時に/から提供されるもの.

9 .パッケージに入れてください。JSONは、スクリプトタグの代わりに次の行のコードを書き込みます

"scripts": {
   "start": "webpack serve  --hot --open",
    "build": "webpack --config webpack.config.js --mode development"
  }

あなたはNPMの開始を書くことによってあなたの反応アプリを起動することができますし、それに書かれた反応で空白のページが表示されます.

最後に、あなたはされます..！

高速リフレッシュが含まれていたとしても、いくつかの変更を行った後、状態が保存され、以前の状態が失われません.これは開発中にとても便利です.
これは、高速リフレッシュとしてのJSとゼロから反応アプリを作成するよりも長いプロセスであったとして、それが簡単にあなたのためになります反応アプリを作成するものだ.これは、単一のコマンドで置き換えることによって、すべての単一のファイルを作るこの全体のプロセスを自動化します.