を作成する独自の作成アプリケーションテンプレート

9018 ワード
react typescript テキストリンク
CREATEの反応アプリは反応で新しい単一のページのアプリケーションを構築を開始するには、新しい方法です.あなたのアプリは1つのビルド依存性が必要ですreact-scripts . フードの下では、あなたのアプリを電源にWebpack、バベル、エスコート、および他の素晴らしいプロジェクトを使用します.

自分で作る
あなたが作成するデフォルトの足場が好きでない場合は、それは本当に簡単に調整するアプリを反応させる.
  • フォルダを作成するcra-template .
  • フォルダにCDを実行するyarn init -y or npm init -y あなたのNPMを好むならば.これは基本を生成しますpackage.json あなたのファイル.
  • クリエイトアtemplate.json あなたの特定のテンプレートの設定で.ここで追加する依存関係は、最終的な依存リストに追加されます.
    • {
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.4",
      "@testing-library/react": "^11.1.0",
      "@testing-library/user-event": "^12.1.10",
      "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
      "extends": ["react-app", "react-app/jest"]
    }
  }
}
  • クリエイトアtemplate フォルダ.
  • インサイドtemplate フォルダクリエイトgitignore 以下の内容のファイル.必ずドットを省略してください.
    • 
# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
  • インサイドtemplate フォルダクリエイトpublic 次のフォルダindex.html .
    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>CRA template</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
  • インサイドtemplate フォルダクリエイトsrc フォルダとindex.tsx それで.
    • import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
  • インサイドtemplate/src フォルダクリエイトApp.tsx ファイル.
    • import React from "react";

const App = () => {
  return <div>My CRA template</div>;
};

export default App;
  • あなたの足場がローカルに動いていることをテストします
    • npx create-react-app my-app --template file:.

    完成コード
    Should look something like this

    NPMに発行
    npm publish

    プロジェクトで公開されたテンプレートを使用する
    npx create-react-app my-app --template your-template-name

    npx create-react-app my-app --template barebones
    CEPHであなたのterrform状態を保存すること
    Nuxt開発経験の共有